Top 40+ Best React Native Interview Questions (2024)

Are you gearing up for a career in React Native development? Whether you’re a seasoned developer or just starting out, mastering React Native is crucial for building cross-platform mobile applications efficiently. As you prepare for React Native interview questions, it’s essential to familiarize yourself with common questions and concepts that might come your way. Before diving into some questions that frequently appear in React Native interviews, let’s first understand the key topics.

What is React Native

React Native is a widely-used framework for building mobile applications using JavaScript and React. Developed by Facebook, it allows developers to create natively-rendered mobile apps for both iOS and Android from a single codebase. This approach not only speeds up development but also reduces the need for separate teams to handle different platforms. For instance, with React Native, you can reuse up to 90% of the code between iOS and Android, significantly improving efficiency.

Key Components in React Native

React Native includes a set of core components that are fundamental to building user interfaces. These include:

View: The most basic building block, similar to a div in web development, used for layout and styling.
Text: Used for displaying text.
Image: Used for displaying images.
ScrollView: Provides a scrolling container.
TextInput: Allows for text input.

These components directly map to native UI building blocks on iOS and Android. For example, the View component in React Native corresponds to ‘UIView‘ on iOS and ‘View‘ on Android.

React Native Interview Questions (Basic)

1. How Different is React Native from ReactJS?

React, also known as ReactJS, is a JavaScript library developed by Facebook for building user interfaces, primarily for web applications. It uses a component-based architecture to create interactive and dynamic web pages.

React Native, however, is a framework that allows developers to build mobile applications for iOS and Android using the same principles as React. While React targets web browsers, React Native targets mobile platforms and provides access to native mobile features and components. For example, React Native offers components like TouchableOpacity and FlatList, which are specifically designed for mobile UI interactions, unlike React’s web-focused components.

Feature	React JS	React Native
Application Type	Web Applications	Mobile Applications
Navigation	Uses React-router	Built-in navigator library
Markup	Uses HTML tags	Does not use HTML tags
Security	Provides high security	Comparatively lower security
DOM Rendering	Renders browser code via virtual DOM	Uses API to render code for mobile

2. What is Flexbox and describe and elaborate on its most used properties?

Flexbox is a layout model designed to allow elements within a container to dynamically align and distribute space. It is highly useful for creating responsive designs.

				
					import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

const FlexboxExample = () => (
  <View style={styles.container}>
    <Text>Left</Text>
    <Text>Right</Text>
  </View>
);

export default FlexboxExample;

Key Properties:

flexDirection: Determines the primary axis of layout (‘column’, ‘row’).
justifyContent: Aligns children within the main axis (‘center’, ‘flex-start’, ‘flex-end’, ‘space-around’, ‘space-between’).
alignItems: Aligns children on the cross axis (‘center’, ‘flex-start’, ‘flex-end’, ‘stretch’).

3. Describe advantages of using React Native?

Large Community: Open-source and community-driven, offering extensive support for developers.
Reusability: Write once and use on both iOS and Android, reducing maintenance and development costs.
Live and Hot Reloading: Facilitates easier development by allowing instant feedback on changes without losing state.
Third-Party Plugins: Supports third-party plugins, enhancing functionality and speeding up development.

4. What are threads in general, and explain different threads in React Native with the use of each?

React Native uses 3 main threads:

MAIN/UI Thread: The primary thread where the Android/iOS app runs. It has exclusive access to UI components.
Shadow Thread: Used for calculating layouts with the React library in the background.
JavaScript Thread: Executes the main JavaScript code of the application.

5. Are default props available in React Native, and if yes, for what are they used and how are they used?

Yes, default props are available in React Native. They provide default values for props when no value is explicitly provided.

				
					import React, {Component} from 'react';
import {View, Text} from 'react-native';

class DefaultPropComponent extends Component {
    render() {
        return (
            <View>
                <Text>{this.props.name}</Text>
            </View>
        );
    }
}

// Default props
DefaultPropComponent.defaultProps = {
    name: 'Bob'
};

export default DefaultPropComponent;

6. Explain about handling User Input in React Native.

User input in React Native is primarily handled through the `TextInput` component, which includes properties like `onChangeText` for capturing text changes and `onSubmitEditing` for submission actions.

				
					import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder='Type here to translate!'
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

7. Elaborate about understanding State in React Native.

State is an essential concept in React Native for controlling component data. It is mutable and can be updated to trigger re-renders and reflect changes in the UI.

				
					import React, {Component} from 'react';    
import { Text, View } from 'react-native';    

export default class App extends Component {    
  state = { myState: 'Initial State' }

  updateState = () => this.setState({ myState: 'Updated State' })

  render() {
    return (
      <View>    
        <Text onPress={this.updateState}> 
          {this.state.myState} 
        </Text>    
      </View> 
    ); 
  } 
}

8. What is Redux in React Native and explain about its components.

Redux is a state management library that provides a predictable way to organize and manage application state across components.

				
					import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

export default App;

Important components include:

Actions: JavaScript objects that send data from the application to the store.
Reducers: Pure functions that define how the application’s state changes in response to actions.
Store: Holds the application’s state. It’s recommended to have a single store.
Components: The UI parts that are connected to the store.

9. Describe Timers in React Native Application.

React Native implements JavaScript timers, such as `setTimeout`, `setInterval`, `setImmediate`, and `requestAnimationFrame`, for executing code at specified times or intervals.

				
					setTimeout(() => {
  console.log('Delayed Code');
}, 3000);

setInterval(() => {
  console.log('Interval Code');
}, 1000);

10. How is Debugging done in React Native Applications?

Debugging can be approached through multiple tools and techniques, ensuring smooth development across different environments:

Developer Menu: Offers options like reloading, live/hot reloading, and UI inspection.
Chrome’s DevTools: Utilize for debugging JavaScript remotely.
React Developer Tools: Standalone tool for inspecting React component hierarchies in the Chrome Developer Tools.
React Native Debugger: Integrates Redux DevTools and React Inspector for comprehensive debugging.
React Native CLI: Useful for logging and interacting directly with the app’s runtime.

console.log(“Debugging point”);

11. How to Avoid Props Drilling?

Props Drilling is a scenario in React where you pass data from a parent component through various nested child components, even if the intermediary components do not need the data, just to reach a deeply nested child component.

To avoid props drilling, you can use the following strategies:

React Context API: Allows you to share values between components without explicitly passing a prop through every level of the tree.
Composition: Build components in a way where they accept passed-in components or elements, which they then render in their output.
Render Props: A technique where a component accepts a function that returns a React element and calls it instead of implementing its own render logic.
Higher-Order Components (HOCs): Functions that take a component and return a new component, allowing you to reuse component logic.
State Management Libraries (Redux or MobX): These libraries offer ways to manage state externally and connect to components as needed, avoiding the need to drill props.

12. Describe about Networking in React Native and how AJAX calls are done?

React Native provides several APIs for making network requests. The most commonly used is the Fetch API for making AJAX calls:

				
					fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

Asynchronous operations with Fetch:

				
					const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then((response) => response.json())
    .then((json) => {
      return json.movies;
    })
    .catch((error) => {
      console.error(error);
    });
};

XMLHttpRequest API is another option, and libraries like Axios or Frisbee that use it under the hood can also be utilized in React Native applications:

				
					var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

13. How Integrating React Native is done in an Existing Android Application?

To integrate React Native components into your existing Android application, follow these key steps:

Setup React Native Dependencies: Ensure your project is set up for React Native by following the official setup guide.
Develop React Native Components: Write your components in JavaScript as you normally would in a React Native project.
Add ReactRootView: In your Android app, incorporate a ReactRootView which acts as a container for your React Native components.
Start React Native Server: Run the React Native development server to bundle your JavaScript code.
Run Your Native Application: Ensure that the React Native server is running and then build and run your native application.
Verify Integration: Test to ensure that the React Native components are rendering and functioning as expected within your Android app.

React Native Interview Questions (Intermediate)

1. What are some advantages of using React Native?

React Native offers several advantages, including:

Faster Development: Since you can use the same codebase for both iOS and Android, development time is significantly reduced. For example, instead of writing separate code for Button in Swift (iOS) and Kotlin (Android), you can use Button from React Native.
Code Reusability: Up to 90% of the code can be shared between platforms. This not only speeds up development but also simplifies maintenance. For instance, a Header component can be reused across different screens and platforms without modification.
Large Community Support: With a vast community, there are numerous libraries, tools, and tutorials available. This can help solve common problems quickly. For example, libraries like React Navigation for routing and Redux for state management are widely supported and documented.
Hot Reloading: This feature allows developers to see the changes they make in real-time without recompiling the entire app. This can save a significant amount of time during development.

2. What is a bridge and why is it used in React Native?

The Bridge in React Native is a layer that connects the Native and JavaScript environments.

Native Layer: Closest to the device, running the application.
Bridge: Acts as a transport layer between JavaScript and Native modules, transporting asynchronous serialized batched response messages.
iOS and Android Platforms: Handle state changes and UI updates by passing serialized batched responses through the bridge to the native layer, which then updates the UI accordingly.

3. What are the core Components in React Native and their web analogies?

React Native UI Component	Android View	iOS View	Web Analog	Description
`<View>`	`ViewGroup`	`UIView`	Non Scrolling `<div>`	A container for layout, touch handling, and accessibility controls.
`<Text>`	`TextView`	`UITextView`	`<p>`	Displays and styles text, handles touch events.
`<Image>`	`ImageView`	`UIImageView`	`<img>`	Displays images.
`<ScrollView>`	`ScrollView`	`UIScrollView`	`<div>`	A generic scrolling container that can hold multiple components and views.
`<TextInput>`	`EditText`	`UITextField`	`<input type=”text”>`	Allows text input from users.

				
					import React from 'react';
import { View, Text, Image, ScrollView } from 'react-native';

const MyComponent = () => (
  <ScrollView>
    <View>
      <Text>Welcome to React Native</Text>
      <Image source={{uri: 'https://example.com/my-image.png'}} />
    </View>
  </ScrollView>
);

export default MyComponent;

4. How do you handle state management in React Native?

State management in React Native can be handled using various approaches, such as local component state, Context API, or external libraries like Redux and MobX. For instance, using Redux, you can create a global state that can be accessed from any component, improving state consistency across the app.

5. How can you write different code for iOS and Android in the same code base?

The `Platform` module detects the operating system. Use `Platform.OS` for conditional rendering and `Platform.select` for platform-specific styles.

				
					import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 400,
  container: {
    flex: 1,
    ...Platform.select({
      ios: { backgroundColor: 'red' },
      android: { backgroundColor: 'green' },
      default: { backgroundColor: 'blue' } // other platforms
    }),
  },
});

6. What are Touchable components in React Native?

Touchable components capture tapping gestures and display feedback. The choice depends on the feedback type:

TouchableHighlight: Use for button-like interactions. Darkens the background on press.
TouchableNativeFeedback: Use on Android for ripple effects.
TouchableOpacity: Reduces the opacity to show feedback.
TouchableWithoutFeedback: Use when no visual feedback is needed on a tap.

				
					<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
  <View style={styles.button}>
    <Text style={styles.buttonText}>TouchableHighlight</Text>
  </View>
</TouchableHighlight>

7. Explain about FlatList components and its key features along with sample code?

`FlatList` displays a scrolling list of data. It only renders items that are currently visible on the screen, improving performance for large lists.

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

const FlatListBasics = () => {  
  return (  
    <View style={styles.container}>  
      <FlatList  
        data={[{key: 'Android'}, {key: 'iOS'}, ...]}  
        renderItem={({item}) => <Text style={styles.item} onPress={() => Alert.alert(item.key)}>{item.key}</Text>}  
      />  
    </View>  
  );  
};

8. Can you explain the use of ‘useEffect’ in React Native?

The ‘useEffect‘ hook in React Native is used for side effects in functional components. It allows you to perform actions such as fetching data, updating the DOM, or setting up subscriptions. For example:

				
					import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const ExampleComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <View>
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
};

9. What are the Different Ways in styling React Native Application?

Style props: Inline styling.
Using StyleSheet: A way to organize styles outside of the component render method.
Styled-components: Allows for CSS-like styling in React Native.

10. Explain Async Storage in React Native Application?

Async Storage is an asynchronous, unencrypted, persistent, key-value storage system in React Native.

Use for: Storing user preferences, settings, or simple app state.
Avoid for: Sensitive data, complex relational data, or large amounts of data (use SQLite or similar).

				
					import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

React Native Interview Questions (Advanced)

1. How do you set up navigation in a React Native app?

To set up navigation in a React Native app, you can use the React Navigation library. Here’s a step-by-step guide:

Install the required packages:

				
					npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Set up the navigation container:

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

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Create the screen components:

				
					// HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;

2. Describe about Memory Leak issues in React Native.

Memory leaks in React Native can occur due to unreleased timers/listeners or closure scope leaks. Garbage Collection (GC) manages memory by deallocating objects that are no longer referenced. However, variables defined outside of class or function scope in JS modules can prevent objects from being garbage collected.

Detecting Memory Leaks in iOS: Use Xcode’s Profile tool to identify leaks.
Detecting Memory Leaks in Android: Android Studio and the Android Device Monitor can be used to detect leaks. Additionally, the Performance Monitor (PerfMonitor) in React Native can help monitor performance and potential leaks.

3. How Sensitive data is stored in React Native?

React Native does not include an out-of-the-box solution for storing sensitive data securely. However, platform-specific options are available:

iOS: Use Keychain Services for secure storage.
Android: Encrypted Shared Preferences and Keystore provide secure storage options.

Libraries such as `expo-secure-store`, `react-native-keychain`, and `react-native-sensitive-info` can help manage sensitive data securely across both platforms.

4. What is Network Security and SSL Pinning?

SSL/TLS protocols establish secure connections by binding cryptographic identities to digital certificates. SSL pinning enhances security by allowing apps to trust only specific predefined certificates, reducing the risk of mis-issuance.

Application: Mobile apps use SSL pinning to ensure that they communicate securely with servers by verifying server certificates against pinned certificates.

5. How do you optimize the performance of a React Native app?

Optimizing performance in a React Native app can involve several strategies:

Avoid Unnecessary Renders: Use React.memo, shouldComponentUpdate, or PureComponent to prevent unnecessary re-renders.
Optimize Images: Use appropriate image sizes and formats, and leverage libraries like react-native-fast-image.
Minimize Bridge Usage: Reduce the number of times you cross the JavaScript-to-native bridge by batching updates and using efficient communication methods.
Use FlatList and SectionList: For rendering large lists, prefer FlatList or SectionList over ScrollView to improve performance.
Use Hermes Engine: For Android apps, enabling the Hermes JavaScript engine can improve startup time and overall performance.

				
					import React from 'react';
import { FlatList, Text, View } from 'react-native';

const DATA = [...]; // your data array

const renderItem = ({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
);

const MyList = () => (
  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
);

export default MyList;

6. Explain about `setNativeProps` and its Performance.

`setNativeProps` allows direct manipulation of a component’s properties without triggering a re-render of the component hierarchy. This can be useful for creating smooth animations but should be used sparingly due to its imperative nature and the potential difficulty in reasoning about the component’s state.

7. What are Smoothing Animations in React Native?

To ensure animations run smoothly in React Native, avoid expensive operations during interactions and animations. Use the `InteractionManager` to schedule long-running tasks after animations or after interactions have completed.

				
					InteractionManager.runAfterInteractions(() => {
  // ...long-running synchronous task...
});

Multiple Choice Questions

1. What is React Native?

A) A web development framework
B) A framework for building mobile applications
C) A database management system
D) A cloud storage service

2. Which company developed React Native?

A) Google
B) Microsoft
C) Facebook
D) Apple

3. What is the primary programming language used in React Native?

A) Java
B) Swift
C) Kotlin
D) JavaScript

4. Which component is used to display text in React Native?

A) View
B) Text
C) ScrollView
D) FlatList

5. How do you create a new React Native project?

A) npm create react-native-app
B) npx create-react-native-app
C) npm init react-native-app
D) npx react-native init

6. Which method is used to manage state in a functional component?

A) setState
B) useEffect
C) useState
D) useContext

7. What is the purpose of the FlatList component?

A) To render a large list of data efficiently
B) To create a static list of items
C) To display a list of images
D) To create a scrollable view

8. Which of the following is not a core component of React Native?

A) View
B) Text
C) Image
D) Link

9. How do you apply styles in React Native?

A) Using CSS files
B) Using inline styles
C) Using the StyleSheet.create method
D) Using JavaScript objects only

10. What is the default flex direction in React Native?

A) row
B) column
C) row-reverse
D) column-reverse

11. Which hook is used for side effects in functional components?

A) useState
B) useEffect
C) useContext
D) useReducer

12. What is the purpose of the useRef hook?

A) To manage component state
B) To perform side effects
C) To access DOM elements or component instances
D) To create context

13. Which component is used for handling touch events?

A) TouchableOpacity
B) TouchableWithoutFeedback
C) TouchableHighlight
D) All of the above

14. How do you handle navigation in a React Native app?

A) Using the React Navigation library
B) Using the Navigator component
C) Using the Link component
D) Using the Router component

15. What is a React Native bridge?

A) A method for styling components
B) A way to handle state management
C) A technique to call native code from JavaScript
D) A component for rendering lists

16. How do you debug a React Native application?

A) Using console.log statements
B) Using the React Native Debugger
C) Using the Chrome Developer Tools
D) All of the above

17. Which command is used to run a React Native application on an Android emulator?

A) react-native start
B) react-native run-android
C) react-native build
D) react-native deploy

18. What is the purpose of the useReducer hook?

A) To manage component lifecycle
B) To manage complex state logic
C) To perform side effects
D) To access context values

19. How do you optimize images in a React Native application?

A) By using the Image component with resizeMode
B) By compressing images before using them
C) By using image caching libraries
D) All of the above

20. What is Expo in the context of React Native?

A) A library for handling navigation
B) A testing tool for React Native
C) A framework for building React Native apps with additional tools and services
D) A state management library

Conclusion

These were the most asked react native interview questions from beginner to advanced level. Preparing for a React Native interview can be challenging, but with a solid understanding of the key concepts and common questions, you can confidently showcase your skills and expertise. Remember to practice coding exercises, review documentation, and stay updated with the latest developments in React Native to ace your interview and embark on an exciting journey in mobile app development.

Enhancing your knowledge and understanding of React Native will not only help you succeed in interviews but also in developing robust and efficient mobile applications.

FAQ's

What is React Native used for?

React Native is a popular JavaScript-based framework that allows you to build natively-rendered mobile apps for iOS and Android

What is component in React Native?

React components are the reusable building blocks we use to create the user interface of our app. Components are the type of the React element. We’ve already seen a few built-in components: View, Text, and Button.

What is bridge in React Native?

The native side could be Objective-C/Swift for iOS or Java/Kotlin for Android. Check above for detailed Explanation.

What should I know about React Native?

An API (Application Programming Interface) is a medium that connects two or more applications. By “connects two or more applications,” I mean that APIs facilitate the exchange of information b/w two or more applications.

Top 30 Best React Native Interview Questions (2024)

Table of Contents