Introduction
The advancements in technology have increased cross-platform app development. As a result, many companies looking to hire React Native developers seek professionals with more than a beginner-level experience of various technologies. As you progress beyond the basics of React Native, it is important to be ready to take on more complex tasks as an intermediate React Native developer. This blog will help you evaluate yourself as an intermediate developer as you go through the React Native interview questions and answers. Read on to learn more about the tools and technologies used in React Native!
Must Read: REACT NATIVE BASIC INTERVIEW QUESTIONS Top React Native Intermediate Questions and Answers
1. How to process an entire React Native code to show the final output on the screen?
- The main thread starts execution at the first start of the app and starts loading JS bundles.
- After the JavaScript code has been loaded successfully, the main thread sends it to another JS thread. This ensures that the UI thread will not be affected when JS does heavy calculations.
- The Reconciler starts diffing when React starts rendering. When a new virtual DOM (layout) is generated, it sends changes to another thread(Shadow thread).
- The Shadow thread calculates layout and sends layout parameters/objects to the main(UI) thread.
- Only the main thread can render something on the screen. So, the shadow thread sends the generated layout to the main thread and only then UI renders.
2. What is a bridge and why is it used in React Native?
The bridge serves as a communication channel between the JavaScript (JS) thread and the native side of a React Native app. A bridge allows interaction between the JavaScript code (where your React Native logic resides) and the native components (such as UI views, sensors, and device features). It is possible to have seamless data exchange and method calls between the two realms.
3. Explain how a bridge is used in both Android and iOS.
Android
In Android, the bridge facilitates the following interactions:
- Native Modules: Developers can create custom native modules (Java classes) that expose functionality to JavaScript. These modules can access native features (e.g., sensors, camera) or perform custom logic.
- Communication: JavaScript code communicates with native modules via the bridge. For example:
- JavaScript invokes methods from native modules using NativeModules.
- Native modules can send data back to JavaScript using callbacks or promises.
- UI Components: React Native components (e.g., View, Text, Image) are mapped to native Android views. The bridge ensures that UI rendering happens natively.
iOS
In iOS, the bridge serves a similar purpose:
- Native Modules: Developers create custom native modules (Objective-C/Swift classes) to expose functionality to JavaScript. These modules can access platform APIs or provide custom features.
- Bidirectional Communication: JavaScript communicates with native modules using the bridge. For instance:
- JavaScript invokes methods from native modules using NativeModules.
- Native modules can send events or data back to JavaScript using callbacks or promises.
- UI Rendering: React Native components map to native iOS views (e.g., UIView, UILabel). The bridge ensures that UI components render natively.
4. Name core components in React Native and the analogy of those components when compared with the web.
| REACT Native UI Component | Android View | iOS View | Web Analog | Description |
|---|---|---|---|---|
| < View > | <ViewGroup> | < UIView > | A non-scrolling <div> | A container that supports layout with flexbox style, some touch handling, and accessibility controls. |
| < Text > | < TextView > | <UITextView> | < p > | Displays, styles, and nests strings of text and even handles touch events. |
| < Image > | <ImageView > | <UIImageView> | < img > | Displays different types of images |
| < ScrollView > | <ScrollView > | <UIScrollView> | < div > | A generic scrolling container that can contain multiple components and views. |
| < TextInput > | < EditText > | <UITextField> | <input type=”text”> | Allows the user to enter text |
5. What is ListView in React Native?
A List View in React Native is a view component that contains the list of items and displays it in a vertically scrollable list.
Example Code
export default class MyListComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={
(rowData) =>
<Text style={{fontSize: 30}}>{rowData}</Text>} />
); }
} React Native Intermediate Interview Questions
Get ready for your React Native interview with top intermediate questions. Ace your interview with our expertly curated list.
PublishedApril 19, 2024
CategoryInterview Questions
Don’t miss the next one.
We publish essays on engineering, hiring, and building teams. Subscribe and we’ll send them when they land.
Unsubscribe anytime · one letter, never more