Introduction

React Native (also known as RN) is a popular JavaScript-based mobile app framework that allows developers to build natively-rendered mobile apps for iOS and Android. The biggest appeal? You can use a single codebase to create cross-platform applications.

React intermediate interview questions often focus on the key features and architectural decisions that make React Native stand out in the mobile development space.

Why Is React Native So Popular?

Released by Facebook as an open-source project in 2015, React Native quickly gained traction and has become a go-to choice for mobile app development. Today, it powers apps used by millions of users globally, including Instagram, Facebook, and Skype.

The rise in popularity can be attributed to several factors:

• Code Reusability: Write once, deploy on both iOS and Android. This saves developers and companies a huge amount of time and resources.

• Familiar Foundation: Built on top of React—a widely used JavaScript library—React Native was instantly familiar to many developers.

• Empowered Frontend Developers: React Native enabled frontend web developers to start building production-ready mobile apps without learning native iOS or Android development from scratch.

The Origin Story: React Native’s Accidental Innovation

Like many game-changing technologies, React Native was born from a need to fix a major internal issue at Facebook. What started as a solution to a problem turned into one of the most revolutionary tools in mobile app development.

Preparing with Intermediate React Interview Questions

If you’re preparing for a job or technical interview, focusing on intermediate react interview questions is crucial. These often dive into topics like:

• Navigation using React Navigation

• Efficient State Management (Redux, Context API)

• Performance Optimization in large-scale apps

• Managing asynchronous operations with async/await or Redux Saga

• Understanding the bridge between JavaScript and native code

Top 15+ Intermediate React Native Interview Questions

1. How is the entire React Native code processed to show the final output on a mobile screen ?

• At the first start of the app, the main thread starts execution and starts loading JS bundles.
• When JavaScript code has been loaded successfully, the main thread sends it to another JS thread because when JS does some heavy calculations stuff the thread for a while, the UI thread will not suffer at all times.
• When React starts rendering, Reconciler starts “diffing”, and when it generates a new virtual DOM(layout) it sends changes to another thread(Shadow thread).
• Shadow thread calculates layout and then sends layout parameters/objects to the main(UI) thread. ( Here you may wonder why we call it “shadow”? It’s because it generates shadow nodes )
• Since only the main thread is able to render something on the screen, the shadow thread should send the generated layout to the main thread, and only then UI renders.

These are important react intermediate interview questions that test your understanding of the React Native threading model and rendering pipeline.

2. What is a bridge and why is it used in React Native ? Explain for both android and IOS ?

Bridge in ReactNative is a layer or simply a connection that is responsible for gluing
together Native and JavaScript environments.

• The layer which is closest to the device on which the application runs is the Native Layer.

The bridge is basically a transport layer which acts as a connection between Javascript and Native modules, it does the work of transporting asynchronous serialized batched response messages from JavaScript to Native modules.

Now for an example, there is some state change that happens, because of which React Native will batch Update UI and send it to the Bridge. The bridge will pass this Serialized batched response to the Native layer, which will process all commands that it can distinguish from a serialized batched response and will update the User Interface accordingly.

Understanding the Bridge is often part of intermediate react interview questions because it highlights performance implications and native interactions.

3. How do you create a basic button in React Native ?

We can create basic buttons using the following syntax: <import { View, Button, StyleSheet } from “react-native”>. Basic buttons support a minimal level of customization and can be modified using TouchableOpacity or TouchableWithoutFeedback.

4. What is ListView and describe its use in React Native ?

ListView is a component for displaying vertically scrollable lists of changing data. Though now deprecated in favor of FlatList, it’s still asked in react js intermediate interview questions.

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>} />  
); }  
}

5. How can you write different code for IOS and Android in the same code base ? Is there any module available for this ?

The platform module detects the platform in which the app is running.

import { Platform, Stylesheet } from 'react-native';
const styles = Stylesheet.create({
height: Platform.OS === 'IOS' ? 200 : 400
})

Additionally Platform.select method available that takes an object containing Platform.OS as keys and returns the value for the platform you are currently on.

import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
 container: {
flex: 1,
   ...Platform.select({
     ios: {
       backgroundColor: 'red',
     },
     android: {
       backgroundColor: 'green',
     },
     default: {
       // other platforms, web for example
       backgroundColor: 'blue',
     },    }),
},
});

Or use Platform.select() for cleaner logic. This ensures platform-specific behavior in one codebase—a popular topic in react intermediate interview questions.

6. What are Touchable components in react Native and which one to use when ?

Tapping gestures can be captured by Touchable components and can display feedback when a gesture is recognized.

Depending on what kind of feedback you want to provide we choose Touchable Components.

Generally, we use TouchableHighlight anywhere you would use a button or link on the web. The background of the view will be darkened when the user presses down on the button.

We can use TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user’s touch.

TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.

If we need to handle a tap gesture but you don’t want any feedback to be displayed, use TouchableWithoutFeedback.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';
export default class Touchables extends Component {
_onPressButton() {
   alert('You tapped the button!')  }
 _onLongPressButton() {
   alert('You long-pressed the button!')
 }
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
);}
}

7. Explain FlatList components, what are its key features along with a code sample ?

FlatList is preferred for rendering large data sets efficiently by only rendering items visible on screen. It’s a common question in intermediate react interview questions.

Key Feature:

The FlatList shows only those rendered elements which are currently displaying on the screen, not all the elements of the list at once.

import React, { Component } from 'react';  
import { AppRegistry, FlatList,  
   StyleSheet, Text, View,Alert } from 'react-native';  

export default class FlatListBasics extends Component {  
 
   renderSeparator = () => {  
       return (  
           <View  
               style={{  
                   height: 1,  
                   width: "100%",  
                   backgroundColor: "#000",  
               }}  
           />  
       );  
   };  
   //handling onPress action  
   getListViewItem = (item) => {  
       Alert.alert(item.key);  
   }  
 
   render() {  
       return (  
           <View style={styles.container}>  
               <FlatList  
                   data={[  
                       {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},  
                       {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},  
                   ]}  
                   renderItem={({item}) =>  
                       <Text style={styles.item}  
                             onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}  
                   ItemSeparatorComponent={this.renderSeparator}  
               />  
           </View>  
       );  
   }  
}  
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);  

8. How To Use Routing with React Navigation in React Native ?

One of the popular libraries for routing and navigation in a React Native application is React Navigation.

This library helps solve the problem of navigating between multiple screens and sharing data between them.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
 return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen
         name="Home"
         component={HomeScreen}
         options={{ title: 'Welcome' }}
       />
       <Stack.Screen name="Profile" component={ProfileScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );
};

9. What are the Different Ways to style React Native Application ?

React Native give us two powerful ways by default to style our application :

1 ) Style props

You can add styling to your component using style props. You simply add style props to your element and it accepts an object of properties.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}>
<View style={{width:200,height:150,backgroundColor:"red",padding:10}}>
<Text style={{fontSize:20, color:"#666"}}>Styled with style props</Text>
</View>
</View>
);
}
}

 2 )  Using StyleSheet

For an extremely  large codebase or you want to set many properties to your elements, writing our styling rules directly inside style props will make our code more complex that’s why React Native give us another way that let us write a concise code using the StyleSheet method:

import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent:"center",
backgroundColor:"#fff",
alignItems:"stretch"
},
title: {
fontSize:20,
color:"#fff"
},
item1: {
backgroundColor:"orange",
flex:1
},
item2: {
backgroundColor:"purple",
flex:1
},
item3: {
backgroundColor:"yellow",
flex:1
},

});

We then  pass the styles object to our component via the style props:

<View style={styles.container}>
<View style={styles.item1}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item2}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item3}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
<View style={styles.item4}>
<Text style={{fontSize:20, color:"#fff"}}>Item number 1</Text>
</View>
</View>

3 ) styled-components in React Native

We can also use styled-components with React native so you can write your styles in React Native as you write normal CSS. It is very easy to include it in your project and it doesn’t need any linking just run this following command inside the root directory of your app to install it:

yarn add styled-components

import React, {Component} from 'react';
import { StyleSheet,Text, View} from 'react-native';
import styled from 'styled-components'
const Container=styled.View`
   flex:1;
   padding:50px 0;
   justify-content:center;
   background-color:#f4f4f4;
   align-items:center
`
const Title=styled.Text`
font-size:20px;
text-align:center;
color:red;
`
const Item=styled.View`
flex:1;
border:1px solid #ccc;
margin:2px 0;
border-radius:10px;
box-shadow:0 0 10px #ccc;
background-color:#fff;
width:80%;
padding:10px;

`

export default class App extends Component {
 render() {
   return (
     <Container>
            <Item >
            <Title >Item number 1</Title>
            </Item>
            <Item >
            <Title >Item number 2</Title>
            </Item>
            <Item >
            <Title >Item number 3</Title>
            </Item>
            <Item >
            <Title >Item number  4</Title>
            </Item>
     </Container>
   );
 }

10. Explain Async Storage in React Native and also define when to use it and when to not?

• Async Storage is the React Native equivalent of Local Storage from the web.
• Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.

DO USE ASYNC STORAGE WHEN..	DON’T USE ASYNC STORAGE FOR..
Persisting non-sensitive data across app runs	Token storage
Persisting Redux state	Secrets
Persisting GraphQL state
Storing global app-wide variables

11. What are the core React Components and what do they do ?

The core React components include:

• Props: You can use props to pass data to different React components. Props are immutable, which means props can’t change their values.
• ScrollView: ScrollView is a scrolling container that’s used to host multiple views. You can use it to render large lists or content.
• States: You use states to control components. The state is mutable in React, meaning that it can change the value at any time.
• Style: React Native doesn’t require any special syntax for styling. It uses the JavaScript object.
• Text: The text components display text in your application. It uses textInput to take input from the user.
• View: View is used to build the UI for mobile applications. It’s a place where you can display your content.

12. How mobile app development with React Native is different than web app development with ReactJS ?

ReactJS and React native, both are developed and open sourced by Facebook Inc. React native framework follows the React JS framework’s basic architecture. React native also promotes a component-based approach to build mobile screens. All the React natives possess similar lifecycle methods which are exposed by React js component. But still, there are a few differences between ReactJS and React Native

1. We use div, span etc. HTML tags to build the UI of the web application but in case of React Native, we use View, Text imported from React Native library.
2. Since React Native is used to developing for Native platform, we can’t access the browser features like window object, local storage etc…
3. React JS and React native are two different open source project on Github.
4. Any new feature related to component architecture first implement by ReactJS and then support is added in React Native framework.
5. Both have different tooling for getting started with development.

React native comes with static type checking tooling enabled by default but you need to perform few steps to enable flow static type checking in React project.

This is one of the most frequently asked React Native interview questions for freshers in recent times. Understand how to bring out their difference in the most concise manner.

13. How does justifyContent flexBox property work?

JustifyContent property aligns the flexible container’s items when the items do not use all available space on the main axis. By default, the main axis is a vertical axis in case of React native. Which means justifyContent property aligns child elements of flex parent vertically in React native.  We can use this property to layout elements in a flex container. JustifyContent supports the following values: flex-start|flex-end|centre|space-between|space-around|initial|inherit; It also apply some control over the alignment of items when they overflow the line. Let me explain JustifyContent’s values:

• flex-start: this is the default value for justifyContent. It means that flex items will start from the top and evenly distributed vertically.
• Flex-end: this is just the opposite behaviour of flex-start. Elements start rendering from the bottom
• Center: Items will be placed in the middle
• Space-between: elements are evenly distributed along the main axis (vertical axis)
• Space-around: flex items will be evenly distributed with equal space around them

14. What are the ways to write react components ?

here are two ways of writing a react component

• Functional component
  • It uses a simple function which returns the JSX
• Class-based component
  • It used the class keyword introduced in ES6. it implements render lifecycle method which returns the JSX.

/* Class based component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Greeting extends Component {
    render() {
        return (
            <Text>Hello {this.props.name} !</Text>
        );
    }
}

/* Functional component */
import React, { Component } from 'react';
import { Text } from 'react-native';

export default function Greeting(props) {
        return (
            <Text>Hello {props.name} !</Text>
        );
}

cases are known as a presentational or dumb component. The functional component gets information via props from its parent component and renders the information. You can see that the functional component accepts props as an argument. ES6 arrow function also is used to define a functional component. The functional component doesn’t store any state and also doesn’t override any lifecycle method of React component. The class-based component has the ability to store state within the component and based on its state value behave differently. The latest version of React 16.8 has included a new feature called React hooks by which we can add state in a functional component.

15. What is the role of AsyncStorage in React Native ?

AsyncStorage is React Native’s key-value, unencrypted storage module that allows developers to store data for offline use. Typically, it’s used to store data when an app is not linked to a cloud service, or when specific features require data storage.

16. How do you create basic text input in React Native ?

The insertion of basic text in React Native apps is handled by the Text and TextInput components. TextInput allows users to type on the app. We can implement it using the following syntax: <import { Text, TextInput, View } from ‘react-native’>.

17. How can you optimize the performance of images in React Native ?

There are several useful tricks for optimizing the performance of images in React Native. These include:

• Using image caching tools
• Using PNG or WEBP formats rather than JPEG
• Using smaller images
• Reducing the number of renders

Core React Native Components You Must Know

Includes:

• View

• Text

• ScrollView

• TextInput

• Props and State

These are fundamentals for both beginners and those answering intermediate react interview questions.

React Native vs ReactJS – Key Differences Developers Should Know

One of the most commonly asked react js intermediate interview questions is about distinguishing React Native and ReactJS in terms of component architecture and platform capabilities.

Using justifyContent for Flex Layouts in React Native

You’ll often see this show up in intermediate react interview questions, especially in layout-related debugging and performance improvement questions.

Different Ways to Write React Components

Know the difference between:

• Functional components with hooks

• Class-based components with lifecycle methods

This is a core part of react js intermediate interview questions.

Handling User Input with Text and TextInput

Basic, yet still asked in many react intermediate interview questions, especially when discussing controlled components.

Image Optimization Techniques in React Native

Questions about improving mobile app performance often include:

• Caching

• Reducing image sizes

• Using FastImage or other libraries

A favorite topic in intermediate react interview questions.

Final Thoughts : React JS Intermediate Interview Questions

Mastering these React intermediate interview questions not only prepares you for interviews but also makes you a confident mobile app developer. Whether you’re transitioning from web development to mobile or refining your React Native skills, focusing on intermediate react interview questions gives you a competitive edge in today’s tech landscape.

For those aiming to become full-stack developers, consider enrolling in a MERN stack course (MongoDB, Express.js, React, Node.js). It’s a powerful combination of technologies that lets you build complete web and mobile applications from front to back using JavaScript.

Whether you’re preparing for interviews or leveling up your skills, deep-diving into react js intermediate interview questions and learning the MERN stack will future-proof your development career.