General/ Easy
- What is List View?
- What is Virtual DOM?
- What are some ways of styling a react native component?
- What is the difference between RCT & RNT?
- List the core components of React Native.
- What is JSX?
- What are native apps?
- What is Render () in React Native?
- What is networking?
- What are the advantages of native apps over hybrid apps?
- What is React Native Apps?
- Name at least one style property that can increase tappable area around an element.
- What are components of Redux?
- Name a few companies that are built using React Native.
- What is difference between React Component and React Element?
- How to test if a node_modules would run on React Native? do you know which will run fine?
- What are best UI Components for React Native?
- What is the difference between React Js and React Native?
- What is the storage system in React Native?
- What are navigators?
- What is React Native?
- Tell us some options of storing persisting data in a react native app.
- What is Scrollview?
- What is props in React Native?
- Can we combine native ios or android code in React Native?
- What is the use of XHR module in React Native?
- How does React Native deals with a variety of screen sizes?
- What are animations? How will they work in React Native?
- How is React Native different from other frameworks for developing a mobile application?
- Is there browser IDE for react native?
- What is Flex?
- What determines the size of a component and what are the ways?
- What is Render?
- Will react native support html?
- What are the disadvantages of using React Native?
- What is Cross platform application development?
- Why does React Native use Redux?
- How does React Native load data on Server?
- How can you improve the performance (load speed, rendering quality) of images?
- What are the advantages of using React Native?
- What are hybrid apps?
- How do you run a React Native app on Android?
- What is the difference between controlled and uncontrolled components?
- What is Style?
- Why do we use curly brace while importing some library?
- What is Flexbox?
- What are the other modules need for react native navigation?
- What are the similarities between React and React Native?
- Who is Founder of React Native?
- What were the major problems with MVC framework?
- How can you pick up camera images in React Native?
- What are the types of data that control a component?
- What are keys used for in React Native?
- What is view?
- What does NPM stand for?
- How does Virtual DOM work in React Native?
- What is the point of StyleSheet.create() in React Native?
- are React components usable in React Native?
- How many threads run in React Native?
- What are Refs used for in React Native?
- What does NPM do?
- What are the steps to create your first React Native Apps?
- What is state in a React component?
- How do you tell React to build in production mode and what will that do?
- When would you prefer a class component over functional component?
- Is React Native Open Source?
Intermediate
- What strategy would you use to optimize a large list of items on FlatList?
- When do you use a TouchableHighlight?
- How do you re-render a FlatList?
- do you know about FlatList in React Native and its advantage over scrollview?
- Have you heard of Listview?
- What is Axios in React Native?
- Why animations very clear and important in React Native?
- How can you keep animations from being blocked on the JavaScript thread? Describe how this works and explain some of the limitations.
- What is a Fragment and why would you use one?
- What is the use of ScrollView component?
- Can you provide some ideas on how to prevent memory leaks in your app?
- List the difference between React Native and Xamarin.
- What is Style Vs Stylesheet in React Native?
- When would you use ScrollView over FlatList or vice-versa?
- What does TouchableHighlight do?
- How are Hot Reloading and Live Reloading in React Native different?
- What is the use of a React native packager?
- Which database is best for react native?
Advanced
- Why is the InteractionManager important?
- What do you mean by component-driven development?
- What is Fabric in React Native?
- What are features of presentational/dumb components?
- What is meant by HOC in React Native?
- What happens if you edit a module that only exports React components in Fast Refresh?
- What is Render Props Pattern?
- What are the 3 principles of the Fabric Architecture of React Native?
- What are Smart/Container components?
- Explain the re-architecture of React Native and the importance of the changes?
- What JavaScript engine does React native use?
- What are the features of Container/Smart components?
- In Fast Refresh, what will happen if you edit files imported by modules outside of the React Tree?
- What is the Gesture Responder System?
- What are Presentational/Dumb components?
- What is meant by InteractionManager?
- do you know how can you detect memory leaks on the app?
- What is "Fast Refresh"?
- What happens if you edit a module where the exports aren't React components in Fast Refresh?
List view is a core component of React Native which displays vertically scrolling lists.
Virtual dom is an in-memory tree representation of the real DOM with lightweight elements. It provides a declarative way of DOM representation for an app and allows to update UI whenever the state changes.
- Inline styling
- StyleSheet
- Styled Components
RNT Let’s say you want to use your own custom code written in iOS or Android. You have to prefix your native files with RNT.
RCT The native React libraries provided by Facebook are prefixed with RCT.
- View: It is the basic built-in component used to build UI of Mobile apps. The view is similar to the div in HTML. It is a content area where you can display your content.
- States: It is used to control the components. The variable data can be stored in the state. It is mutable means a state can change the value at any time.
- Props: Props are used to pass data to the different components. It is immutable means props cannot change the value. It provides a connection between the container component and a presentation component.
- Style: It is an essential component in the web or mobile, which makes the application attractive. React Native does not require any special language or syntax for styling. It can style the application using the JavaScript object.
- Text: This component displays text in the app. It uses the basic component textInput to take text input from the user.
- ScrollView: It is a scrolling container used to host multiple views. It can be used to render the large list or content in view with a scroll bar.
JSX is a way for writing xml code along with javascript, known as javascript extension. It is used most of the time to create react native user interfaces.
- Native mobile apps are the most common type of app.
- They are built for specific platforms and are written in languages that the platform accepts. For example, Swift and Objective-C for native iOS apps and Java or Kotlin for native Android apps.
- Native apps are also built using the specific Integrated Development Environment (IDE) for the selected operating systems
It is mandatory for every react native component to have a render (). One single react element is returned by Render that is representation of native DOM component.
It provides Fetch Functions to request Http Requests to another server.
- They work efficiently as they are built for that specific platforms.
- Native apps are responsive on all the platform-specific devices.
- They are very fast and the best in the app performance.
- Native apps better integrate with mobile hardware.
- They have interactive and intuitive User Interface (UI) and User Experience (UX) as per the user expectations based on specific platforms.
- Some of the Native mobile apps work even without the Internet connection.
- Native apps are secured and reliable.
- They can easily access or utilize the other device-specific capabilities like GPS, Camera, Contacts, etc.
React Native Apps are not web applications. These types of apps are running on mobile devices, and cannot load over the browser. Also, they are not hybrid apps that build over Ionic, Phonegap, etc. which can run over WebView component. They are the real native apps built in a single language JavaScript with the native components to run on mobile devices.
- Padding (and also paddingVertical, ...Horizontal, ...Left, ...Right, ...Top, ...Bottom).
- minHeight and minWidth.
- hitSlop.
- Make Tappleble areas larger.
- Action
- Reducer
- View
- Store
Facebook, Airbnb, Instagram, Pinterest, Tesla, Uber, etc.
React Component is either a class or a function which accepts input data, and returns React element. On the other hand, react element does not create react component, but instead it only displays its look.
All node_modules, as any real javascript library, would run fine if they don’t rely upon Node.js run-time modules or web-specific intentions. There is no defined way to test the compatibility of any node_modules.
- Material UI
- React Bootstrap
- Semantic UI
- React Toolbox
- Ant Design
React Js: ReactJs is a JavaScript Library used for developing apps in HTML5 using JavaScript as the developing language.
React Native: React Native is used to develop native mobile apps using JavaScript as the development language.
React Native uses AsyncStorage class to store data in key-value pair which is global to all app.
These are used to change from one scene to another scene.
- React Native is a mobile app development framework that enables the development of multi-platform Android and iOS apps using native UI elements.
- It is based on the JavaScriptCore runtime and Babel transformers.
- This famous framework for mobile app development started in the summer of 2013 as Facebook’s internal hackathon project.
- Async Storage ("built-in" to React Native)
- SQLite
- Realm
- Firebase
- MongoDB
It helps in viewing the large content using a scrollbar.
Props are parameters which are used to customise a component at the time of creation and on re-render. Props are like arguments passed to a React component.
Yes. iOS and Android can be combined in React Native.
XHR HttpRequest is an API, which is utilized for implementation of HttpRequest in order to post data on a server.
- Flexbox provides uniform layout on screen with different sizes using its three properties: justify-content, flex-direction, alignItems.
- Dimensions can style the page accurately on screen with different sizes.
- Pixel ratio class can be utilized to access the pixel density of the device and render the image accordingly.
- The aspect ratio sets the height.
- Scrollview, a scrolling container that contains multiple components and can be scrolled both vertically and horizontally.
Animations are manipulative images or objects that appear as moving objects. We can use animations with React Native API, Animated.decay, Animated.parallel and Animated.stagger.
- React Native app is a real mobile app, not a web app running inside a mobile app shell. Other alternative like Cordova, ionic run a web app in a web view.
- React Native app is converted into machine code which runs on mobile that is why it gives better performance than other alternatives.
- React Native mobile apps are more close to Native app development in comparison to other Javascript frameworks
- Mobile application built with React native has small bundle size in comparison to older hybrid application development framework.
Yes, there are Browser IDE for React Native.
Flex or flex boxing is a technique to distribute different components in react native apps. You can distributes react native views horizontally, vertically, provide space in between or space around.
The height and width determine the size of component on the screen. Two different ways to set height and width.
- Fixed Dimensions
- Flex Dimensions
Render Props is a technique in which react components are transformed into DOM nodes which are understood by the browser.
React Native does not support HTML.
- React Native is still new and immature: React Native is a new framework in Windows, Android, and iOS programming languages. It is still in the improvement stage, which can have a negative impact on the apps.
- Learning is tough: React Native cannot learn quickly, especially for a fresher in the app development field.
- It Lacks the Security Robustness: React Native is an open-source JavaScript framework, which is fragile and creates a gap in the security robustness. When you are creating banking and financial apps where data is highly confidential, experts advise not to choose React Native.
- It Takes More Time to Initialize: React Native takes a lot of time for initializing the runtime even if you are using the hi-tech gadgets and devices.
- Existence is Uncertain: As Facebook develop this framework, its presence is uncertain since it keeps all the rights to kill off the project anytime. As the popularity of React Native rises, it is unlikely to happen.
Cross Platform Application Development is a platform for creating different software which are supported by multiple mobile operating systems.
Redux is a standalone state management library that React Native use to simplify data flow within an app.
React Native consumes Fetch API to load data on the Server when needed.
- Server-side compression
- Third-party tools such as Cloudinary
- Image caching
- Cross-Platform: It offers the facility to "Write once and run everywhere." It is used to create apps for Android, iOS, and Windows platforms.
- Performance: The code written in React Native is compiled into native code, which enables it for all operating systems to provide closer native appearance and functions in the same way on all platforms.
- Community: React Native provides a large community of passionate developers who are always ready to help us to fix bugs, and issues occur at any instant.
- Hot Reloading: Making a few changes in your app's code immediately visible during development. If the business logic is changed, its reflection is live reloaded on screen.
- Faster Development: React Native helps to develop apps fast. It uses a common language to build an app for Android, iOS, and Windows platforms, which gives speedier app deployment, delivery, and quicker time-to-market.
- JavaScript: JavaScript knowledge is used to build native mobile apps.
- Hybrid mobile apps are applications that are installed on a device, just like any other app.
- Hybrid apps are deployed in a native container that uses a mobile WebView object. When the app is used, this object displays web content thanks to the use of web technologies (CSS, JavaScript, HTML).
- First, enable the USB Debugging option inside the Developer Options.
- Plug the device via USB to the development machine.
- Run adb devices command to check that the device is correctly connected to ADB
- Now install and launch your app by using the below-given command: $ react-native run-android
If the value displayed on UI by the Component is determined by form input, then it is called a controlled component. On the other side, if the State determines the value, then it is called an uncontrolled component.
Style is a core component used in React Native. To make an app look stylish, we use Style Core Component to decorate it.
Curly braces are used to import small pieces of library.
Flexbox is used to give a consistent layout on different screen sizes.
- react-native-gesture-handler
- react-native-reanimated
- react-native-screens
- react-native-safe-area-context
- react-navigation-stack
Both, React and React Native uses:
- React Lifecycle Methods
- Recat State and Props
- Recat Components
- Redux Library
Jordan Walke (Facebook) is founder of React Native.
- Applications were slow and inefficient.
- There was huge memory wastage
- Because of circular dependencies, a complicated model was created around models and views.
React Native Image Picker is a module, which helps you in picking images from your library or directly from camera.
- There are two types of data that control a component: props and state.
- props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
Keys are used for making a component unique after a change.
It is defined as a container, which supports layouts such as some touch handling, flexbox and more.
NPM stands for Node Package Manager.
- Diffing: Virtual DOM tree is updated, and React Native compares previous and present version of Virtual DOM. This is called diffing.
- Updating Real DOM: When diffing has been done, react native updates those changes only in real DOM.
In React Native, StyleSheet.create() send the style only once through the bridge to avoid passing new style object and ensures that values are immutable and opaque.
Yes, React components are used in React Native.
- React Native UI Thread (Main Thread): This thread is used for the layout of the mobile app.
- React Native JavaScript Thread: It is a thread where our business logic will run. It means JS thread is a place where our JavaScript code is executed.
- React Native Modules Thread: Sometimes, our app needs access to platform API, which happens as a part of native module thread.
- React Native Render Thread: This thread is used to generate actual OpenGL commands used to draw the app UI.
Refs provide you direct access to a DOM element or a components instance.
npm is a line interface program. It installs command line interface in React Native.
First, to create native app: npm install -g create-react-native-app
Create your first React Native App: create-react-native-app myFirstProject
Now, navigate to the project directory: cd myFirstProject
Run the following command: npm start
State is another way apart from props by which we can modify a React component. React component’s state value changes in the life cycle of component, unlike props. We should not directly change state value of react component. React framework gives the setState method by which state of a component should be changed.
Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. It is also a good idea to minify your code because React uses Uglify’s dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle.
A Class component is used when a component has state and lifecycle, otherwise a functional component is used.
Yes. React Native is Open-Source Mobile Network Application Framework.
- Use PureComponent on renderItem with bind methods.
- Add keyExtractor property.
- Add pagination.
- Define getItemLayout.
- Define removeClippedSubviews true.
The TouchableHighlight can be used where you would use a button or link on the web. The background of this component becomes dark on pressing it.
By using extraData property on the FlatList component. By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes.
FlatList is a component used to display a line of data. FlatList is often used to display long lost of data where the number of items could fluctuate. It renders only the element in focus on the screen, not the whole list, thus it is better to use FlatList rather than scrollview.
It comprises of a list of items that are displayed in a scrollable vertical list. It is a core React native Component.
With the help of Axios, the user can send GET, POST, PUT, and DELETE requests to the REST API and render a response to the application.
The animated API of Native React is designed to be serialized. That means users can send animation to native without having to go through the bridge on every frame. Once the animation gets started, the JS thread will be blocked, and the animation will run smooth. Due to the code is converted to native views before rendering, the animation will run smoothly in React native
- By adding useNativeDriver: true to the animation options.
- It works by passing the animation to the native thread where it will not be blocked by the JavaScript thread.
- This will work on non-layout properties like opacity and transform, but will not work on things like flex, or position.
- A fragment is a way of grouping JSX elements together without adding to the render tree by wrapping them in an additional view.
- A good example of where to use a fragment is in a dedicated component of a screen where no additional container styling is needed.
- The benefits of using a fragment is less complex styling in some cases and less complex rendering.
- The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally.
- ScrollView renders all its react child components at once, but this has a performance downside.
- Release timers/listeners added in componentDidMount.
- Handle closure scope.
Using Xamarin, you can build iOS, Android Windows, and Mac apps. That means it is a cross-platform framework, but it uses c# for development rather than javascript, unlike React native.
- Style is a set of attributes used to design the UI part of the application. It consists of colors, strings, layouts, etc. The style in React Native is similar to CSS in HTML.
- A stylesheet is a group of styles. The stylesheet is used when grows in size then its cleaner approach put all styles in a single place.
- do you need to render a list of similar items from an array or the data is very big? Use FlatList.
- do you need to render generic content in a scrollable container and the data is small? Use ScrollView.
TouchableHighlighy is a wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. TouchableHighlight must have one child.
- Live reloading reloads or refreshes the entire app when a file changes.
- Hot reloading only refreshes the files that were changed without losing the state of the app.
- Merging all the code into one javascript file.
- It is capable of translating the js code that your device has trouble understanding.
- The conversion of an image in an object is done by React native packager.
SQLite database is best for react native.
React Native has only one thread for making UI updates which can be overloaded and result in drop frames. Developers use interaction manager to ensure that the function is only executed after the animations occurred so that any frame drops may not result.
The process of breaking the entire UI into various minor reusable components and developing them alone. Thus building entire UI by adding those independently built reusable components. It leads to faster and robust development of applications. It results in less code, thus less maintenance and fewer bugs to fix.
Fabric is the new React Native architecture proposed by the community to make the mobile application user experience close or even better than the native apps.
- Are concerned with how things look.
- Have markup and styles of their own.
- Have no dependencies on the rest of the app, such as Redux stores.
- Don’t specify how the data is loaded or mutated.
- Receive data and callbacks exclusively via props.
- Rarely have their own state (when they do, it’s UI state rather than data).
HOC is a technique in React Native, which allows you to reuse component logic. HOC takes a component, and gives back new component.
If you edit a module that only exports React component(s), Fast Refresh will update the code only for that module, and re-render your component. You can edit anything in that file, including styles, rendering logic, event handlers, or effects.
Render Props pattern is to share data and functionality between components without repeating code. Besides sharing the data and functionality of the shared component, render props enabled developer to have the full control of the component rendering.
- Prioritizing the Tasks
- Immutable Shadow Tree
- Reducing Memory Consumption
Smart component keep track of state and concern with how things work. Container component still receives data or function via props and can pass it to another smart component or dumb component as props. Container component pattern is class-based components and have constructor() functions.
- Facebook is working internally to change the way Javascript interfaces with Native Modules. This is an overhaul of the UI-Layer, it’s codenamed “Fabric”
- TurboModules will be the next iteration of NativeModules. Importantly this will ensure native modules are loaded eagerly instead of all at once avoiding startup overhead
- Also, TurboModules can be called synchronously avoiding asynchronous calls across the RN bridge
- Along with this change the core of React Native is going lean. Which means many libraries such as Async Storage, Geolocation and Device information are moving to separate repositories
In most cases, React Native will use JavaScriptCore, the JavaScript engine that powers Safari.
- Are concerned with how things work.
- Don’t usually have any markup of their own except for some wrapping Views, and never have any styles.
- Provide the data and behavior to presentational or other container components.
- Call Redux actions and provide these as callbacks to the presentational components.
- Are often stateful, as they tend to serve as data sources.
- Are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.
If you edit a file that's imported by modules outside of the React tree, Fast Refresh will fall back to doing a full reload.
Gesture Responder System is a system that manages the lifecycle of the applications which are built in React- Native framework.
This component only responsible to present something to DOM. There will be no logic at all inside this component therefore it is called dumb component. Because dumb component only focus on the presentation, it is ideally will the most reusable component.
InteractionManager is native module in react native, which helps animations run smoothly in reactive native.
Xcode and Android studio provide tools to track the memory used by an app. These tools can be used to test the app on both devices and simulators.
Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu.
If you edit a module with exports that aren't React components, Fast Refresh will re-run both that module, and the other modules importing it. So if both Button.js and Modal.js import Theme.js, editing Theme.js will update both components.
Want to test this skill? Checkout Adaface assessments
React Native & JavaScript
(100% free to get started, no credit card required)
