This page contains important React Native Interview questions and answers for those who are preparing for the job of React Native developer. we wish you good luck.
1. What is React Native?
2. Why use React Native?
There is the following list of React Native features behind its use:
- Easy to use
- Open-source framework
- Cross-platform compatibility
- Code Sharing
- Faster Development
- Saves Time and efforts
- Gives Native look and feel
3. How to install React Native App on iOS?
To install React Native, we will have to follow these steps:
- Start with installing node and watchman
- Then, install React native CLI with npm
- Install Xcode and its Command-line tools
- Create a React Native project by using the following command
- React-native init MyNewProject
- cd MyNewProject
- react-native run-ios
4. What are the advantages of React Native?
- Conveniently uses the client as well as server-side
- Superbly cost-effective and code reuse
- Better code readability because of JSX use
- Easy to integrate with other significant frameworks
- Easy to write UI test cases because of React
- Hot Loading
- Hybrid Development
5. What are the limitations of React Native?
The React Native has the following limitations or cons
- Security risks
- Single-threaded interface
- Poor memory management
- Doesn’t support all native APIs
- Dependable on third-party libraries
- Not equivalent to true native apps written entirely on Java or Swift/Obj-C.
6. List the essential components of React Native.
React native have the following core components: Basic UI components in React Native
- View: View in React Native is equivalent to <div> tag in HTML. It is a content area where the actual UI components (Text, Image, TextInput, etc) would be displayed. View is used to organize the content in a good manner
- Text: Text is a very basic built-in Component which displays text in the Application
- Image: A component for displaying images
- TextInput: This component is used to take user input into the App
- ScrollView: It is a scrolling container that can host multiple components and views that can be scrolled
- StyleSheet: Similar to CSS stylesheets, Provides an abstraction layer similar to CSS stylesheets
User Interface Components in React Native:
- Button: A basic button component for handling touches that should render nicely on any platform
- Switch: Renders a Boolean input
- Slider: A component used to select a single value from a range of values
- Picker: Renders the native picker component on iOS and Android
ListView Components in React Native:
- FlatList: A component for rendering performant scrollable lists
- SectionList: Like FlatList, but for sectioned lists
Android Specific components in React Native
- DatePickerAndroid: Opens the standard Android date picker dialog
- DrawerLayoutAndroid: Renders a DrawerLayout on Android
- BackHandler: Detect hardware button presses for back navigation
- ProgressBarAndroid: Renders a ProgressBar on Android
- ToastAndroid: Create an Android Toast alert
- ViewPagerAndroid: Container that allows flipping left and right between child views.
7. What are Pure Components?
8. What are the Cons of React Native?
- React Native is still a new development platform as compared to iOS and Android platforms. It is still immature, i.e. in an improvement stage and impacting negatively on apps.
- Sometimes, React Native built-in apps face performance problem if there is a requirement of advanced functionality. In that case, they don’t perform well as compared to native apps.
9. How many threads run in React Native?
There are two threads run in React Native:
- Main UI thread
10. What are props in React Native?
props pronounced as the properties of React Native Components. props are the immutable parameters passed in Presentational Component to provide data.Q 11. What are React Native Apps?
React Native Apps are not web apps; they are the real and native mobile applications built-in a single language with the native components to run on mobile devices.Q 12. List the major users of React Native?
There are thousands of React Native built-in apps. Here is the list of those apps:
- KFC Application
- Baidu mobile
13. How to run react native app on Android?
To run React Native in Android, we have to follow these:
- 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
14. Can we use Native code alongside React Native?
Yes, we can use a native code alongside React Native for task completion, and several limitations can also overcome in previous versions like Titanium.
15. Are React Native built-in mobile apps like other Hybrid Apps which are slower in actual than Native ones?
React Native designed as a highly-optimized performance-based framework that builds real mobile apps with native components. Facebook is the best-suited example of high performance based app built-in React Native.
16. What is the difference between React Native and Native Script?
- React Native has faster development speed than Native Script. React Native exists with reusable components that developed at once can be used at different mobile platforms and accelerates mobile app development while Native +Script exists with a less number of plugins among which some pass improper verification.
- React Native performs high as compared to Native Script. React Native is React based and uses virtual Dom for faster UI updation while Native Script uses slower Angular, Vuejs, and TypeScript.
- Native Script exists with a box of various themes that shorten the gap between the different platform UIs whileReact Native doesn’t live with predefined themes; you get default look and feel by the devices.
17. What is the significance of keys in React?
Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to an increase in the application’s performance.Q 18. Can we combine native codes of Android and iOS in React Native?
Yes, we can do this as React Native fluently combines the components of both iOS and Android written in Swift/ Objective-C or Java.
19. What is the point of StyleSheet.create() in react native?
The stylesheet is a React Native module that allows developers to create immutable stylesheet references. App developers can pass natural style object into the create() method, which will freeze the objects and assign each with an ID. It will allow developers to avoid creating a new style object every render pass and only once send the purpose across the asynchronous bridge.
20. Why React Native has very clear animations?
The animated API of React Native was designed as serializable so that users can send animations to native without going through the bridge on every frame. Once the animation starts, a JS thread can be blocked, and the animations will still run fluently. As the code converted into native views before rendering, the animations in React native will run smoothly, and the users get bright animations.
21. Differentiate between the React component and the React element
React component is a class or function that accepts input and returns a React element while React element displays the look of React Component Instance to be created.
22. Why React Native use Redux?
Redux is a standalone state management library present in React Native and can be used combined with any framework or library. With the use of Redux, app developers can use one application state as a global state and interact with the state from any react component will be easy.
23. Which node_modules will run in React Native? How to test for this?
24. What is Virtual DOM and how it works in React Native?
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.
Working: Virtual DOM lists elements and their attributes and content. It renders the entire UI whenever any underlying data changes in React Native. Due to which React differentiates it with the previous DOM and a real DOM gets updated.
25. What is InteractionManager and what is its importance?
InteractionManager is a native module in React native that defers the execution of a function until an “interaction” finished.
26. What is the point of the relationship between React Native and React?
27. What are the similarities between React Native and React?
React.js and React Native share:
- same lifecycle methods like componentDidMount
- same state and prop variables
- same component architecture
- similar management libraries like Redux
28. Describe HOC
HOC (High Order Components) in React is the functional programming methodology for reusing component logic.
- It takes a component as an argument
- returns a new component
It is a pattern evolved from React’s compositional nature to decompose the logic into simpler and smaller reusable functions.
29. Define Native apps
A Native app is a software program for a specific mobile device that is developed on a particular platform in a specific programming language like Objective-C/Swift for iOS and Java for Android. It can use device-specific hardware and software as built on a particular device and its OS. It uses the latest technology such as GPS and provides optimized performance.
30. What are the Hybrid Apps?
31. What are refs in React? When to use Refs?
Refs are escape hatch that provides a direct way to access DOM nodes or React elements created in the render method. Refs get in use when:
- To manage focus, text selection, or media playback
- To trigger imperative animations
- To integrate with third-party DOM libraries
32. What does a React Native packager do?
A React Native packager does a few things:
- It converts assets like PNG files into objects that can be displayed by an Image
33. What is NPM in React Native?
npm installs the command-line interface in React Native like
npm install -g react-native-cli
34. What are “props” and “state”?
props is short for properties and immutable parameters (Unchangeable inside the component). It is set by their parent and fixed for the whole lifetime of a component and get passed to the Presentational component.
state is mutable parameters (Changeable inside the component) and gets handled within the container component. It can’t be accessed and modified outside the component.Q 35. What is Style?
- style property: adds styles inline.
- external Stylesheet: enables us to write concise code.
36. How To Handle Multiple Platforms?
React Native smoothly handles multiple platforms. The large numbers of the React Native APIs are cross-platform so that one React Native component will work seamlessly on both iOS and Android. It provides the ways using which you can easily organize your code and separate it by platform, It is used to detect the platform in which the app is running and Platform-specific file extensions to load the relevant platform file.
37. When would you use a class component over a functional component?
We use class component if our component has state or a lifecycle method(s). Otherwise, we use a Functional component.
38. How React Native handle different screen size?
React Native offers many ways to handle different screen sizes:
Flexbox is designed to provide a consistent layout on different screen sizes. It offers three main properties:
Pixel Ratio exists in the official documentation with the definition such that we can get access to the device pixel density by using Pixel Ratio class. We will get a higher resolution image if we are on a high pixel density device. An ethical principle is that multiply the size of the image we display by the pixel ratio.
Dimensions easily handle different screen sizes and style the page precisely. It needs to write the code only once for working on any device.
39. Are all React components usable in React Native?
Web React components use DOM elements to display (ex. div, h1, table, etc.), but React Native does not support these. We will need to find libraries/components made specifically for React Native. But today React is focusing on components that can be shared between the web version of React and React Native. This concept has been formalized since React v0.14.
40. What is the challenge with React Native?
Working across separate Android and iOS codebases is challenging.
41. Does React Native use the same code base for Android and iOS?
Yes, React Native uses the same code base for Android and IOS. React takes cares of the native components translations. For example- A React Native ScrollView uses native ScrollView on Android and UiScrollView on iOS.
42. Is React Native a Native Mobile App?
Yes, React Native compiles a native mobile app using native app components. React Native builds a real mobile app that is indistinguishable from an app built using Objective-C or Java.
43. How can React Native integrate more features on the existing app?
React Native is great to start a new application from scratch. However, React Native works well to add new features to an existing native app. It needs some steps to add new React Native based features, screen, views, etc. The specific steps are different for the different platform you’re targeting.
- Set up the directory structure.
- Configuring permissions.
- Code integration.
- Test your integration.
44. What is the storage system in React Native?
45. Describe How Events Are Handled In React?
In order to solve cross-browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers. What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.
46. What are synthetic events in React?
Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.
47. What is Style Vs Stylesheet in 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.
48. What is JSX?