{"id":12536,"date":"2024-09-04T10:00:14","date_gmt":"2024-09-04T04:30:14","guid":{"rendered":"https:\/\/www.placementpreparation.io\/blog\/?p=12536"},"modified":"2025-02-27T12:56:21","modified_gmt":"2025-02-27T07:26:21","slug":"react-native-interview-questions-for-freshers","status":"publish","type":"post","link":"https:\/\/www.placementpreparation.io\/blog\/react-native-interview-questions-for-freshers\/","title":{"rendered":"Top React Native Interview Questions for Freshers"},"content":{"rendered":"

Are you preparing for your first React Native interview and wondering what questions you might face? Understanding the key React Native interview questions for freshers can give you more clarity.<\/p>

This blog is here to help you get ready with practical questions that test your real-world problem-solving skills. We’ve gathered some of the most common basic React Native interview questions that freshers often encounter.<\/p>

With this guide, you’ll be well-prepared to tackle these React Native interview questions and answers for freshers and make a strong impression in your interview.<\/p>

\"fsd<\/a><\/p>

Practice React Native Interview Questions and Answers<\/h2>

Here are the top 50 React Native Interview questions for freshers with answers:<\/p>

1. What is React Native, and how does it differ from React?<\/h3>

Answer:<\/strong><\/p>

React Native is a framework for building mobile applications using React. Unlike React, which targets web browsers, React Native targets mobile platforms (iOS and Android) and uses native components instead of web components.<\/p>

\n

import { Text, View } from ‘react-native’;<\/p>\n<\/div><\/div>

2. How do you set up a new React Native project?<\/h3>

Answer:<\/strong><\/p>

Use the npx react-native init<\/strong> command followed by the project name to set up a new React Native project.<\/p>

\n

npx react-native init MyNewProject<\/p>\n<\/div><\/div>

3. What is the purpose of the AppRegistry in React Native?<\/h3>

Answer:<\/strong><\/p>

AppRegistry<\/strong> is the entry point to run a React Native application. It tells React Native which component to render as the root component.<\/p>

\n

import { AppRegistry } from ‘react-native’;
\nimport App from ‘.\/App’;<\/p>\n

AppRegistry.registerComponent(‘MyApp’, () => App);<\/p>\n<\/div><\/div>

4. How do you run a React Native app on an iOS or Android emulator?<\/h3>

Answer:<\/strong><\/p>

Use the npx react-native run-ios<\/strong> or npx react-native run-android<\/strong> commands to run the app on the respective emulator.<\/p>

\n

npx react-native run-ios
\nnpx react-native run-android<\/p>\n<\/div><\/div>

5. What is JSX, and how is it used in React Native?<\/h3>

Answer:<\/strong><\/p>

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. In React Native, JSX is used to describe the UI.<\/p>

\n

const App = () => (
\n<View>
\n<Text>Hello, world!<\/Text>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

6. How do you create a functional component in React Native?<\/h3>

Answer:<\/strong><\/p>

A functional component is a simple function that returns JSX to render UI elements.<\/p>

\n

const MyComponent = () => (
\n<View>
\n<Text>My Functional Component<\/Text>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

7. How do you apply styles to components in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the StyleSheet<\/strong> API or inline styles to apply styles to React Native components.<\/p>

\n

import { StyleSheet, View, Text } from ‘react-native’;<\/p>\n

const styles = StyleSheet.create({
\ncontainer: {
\npadding: 20,
\nbackgroundColor: ‘lightblue’,
\n},
\ntext: {
\nfontSize: 20,
\ncolor: ‘darkblue’,
\n},
\n});<\/p>\n

const App = () => (
\n<View style={styles.container}>
\n<Text style={styles.text}>Styled Text<\/Text>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

8. How do you handle component state in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the useState<\/strong> hook to manage state within a functional component.<\/p>

\n

import { useState } from ‘react’;
\nimport { View, Button, Text } from ‘react-native’;<\/p>\n

const App = () => {
\nconst [count, setCount] = useState(0);<\/p>\n

return (
\n<View>
\n<Text>{count}<\/Text>
\n<Button title=”Increment” onPress={() => setCount(count + 1)} \/>
\n<\/View>
\n);
\n};<\/p>\n<\/div><\/div>

9. How do you pass data between components in React Native?<\/h3>

Answer:<\/strong><\/p>

Pass data between components using props. The parent component passes data to the child component as a prop.<\/p>

\n

const ChildComponent = ({ message }) => (
\n<Text>{message}<\/Text>
\n);<\/p>\n

const ParentComponent = () => (
\n<ChildComponent message=”Hello from parent!” \/>
\n);<\/p>\n<\/div><\/div>

10. How do you conditionally render components in React Native?<\/h3>

Answer:<\/strong><\/p>

Use conditional statements like if-else<\/strong> or ternary operators to render components based on certain conditions.<\/p>

\n

const App = ({ isLoggedIn }) => (
\n<View>
\n{isLoggedIn ? <Text>Welcome back!<\/Text> : <Text>Please log in.<\/Text>}
\n<\/View>
\n);<\/p>\n<\/div><\/div>

11. How do you set up navigation in a React Native app?<\/h3>

Answer:<\/strong><\/p>

Use the react-navigation<\/strong> library to handle navigation. Start by installing the necessary packages and setting up a NavigationContainer<\/strong>.<\/p>

\n

import { NavigationContainer } from ‘@react-navigation\/native’;
\nimport { createStackNavigator } from ‘@react-navigation\/stack’;<\/p>\n

const Stack = createStackNavigator();<\/p>\n

const App = () => (
\n<NavigationContainer>
\n<Stack.Navigator>
\n<Stack.Screen name=”Home” component={HomeScreen} \/>
\n<Stack.Screen name=”Details” component={DetailsScreen} \/>
\n<\/Stack.Navigator>
\n<\/NavigationContainer>
\n);<\/p>\n<\/div><\/div>

12. How do you navigate between screens in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the navigation.navigate()<\/strong> method provided by the react-navigation<\/strong> library to move between screens.<\/p>

\n

const HomeScreen = ({ navigation }) => (
\n<Button title=”Go to Details” onPress={() => navigation.navigate(‘Details’)} \/>
\n);<\/p>\n<\/div><\/div>

13. How do you pass parameters to routes in React Native?<\/h3>

Answer:<\/strong><\/p>

Pass parameters to routes using the navigate()<\/strong> method, and access them using route.params<\/strong>.<\/p>

\n

\/\/ Navigating with parameters
\nnavigation.navigate(‘Details’, { itemId: 42 });<\/p>\n

\/\/ Accessing parameters
\nconst { itemId } = route.params;<\/p>\n<\/div><\/div>

14. How do you handle deep linking in React Native?<\/h3>

Answer:<\/strong><\/p>

Configure deep linking by setting up the Linking<\/strong> module and defining URL patterns in your navigation.<\/p>

\n

const linking = {
\nprefixes: [‘myapp:\/\/’],
\nconfig: {
\nscreens: {
\nHome: ‘home’,
\nDetails: ‘details\/:id’,
\n},
\n},
\n};<\/p>\n

const App = () => (
\n<NavigationContainer linking={linking}>
\n{\/* Navigator setup *\/}
\n<\/NavigationContainer>
\n);<\/p>\n<\/div><\/div>

15. How do you implement a bottom tab navigator in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the createBottomTabNavigator<\/strong> function from @react-navigation\/bottom-tabs<\/strong> to implement a tab-based navigation.<\/p>

\n

import { createBottomTabNavigator } from ‘@react-navigation\/bottom-tabs’;<\/p>\n

const Tab = createBottomTabNavigator();<\/p>\n

const App = () => (
\n<NavigationContainer>
\n<Tab.Navigator>
\n<Tab.Screen name=”Home” component={HomeScreen} \/>
\n<Tab.Screen name=”Settings” component={SettingsScreen} \/>
\n<\/Tab.Navigator>
\n<\/NavigationContainer>
\n);<\/p>\n<\/div><\/div>

16. What is the difference between state and props in React Native?<\/h3>

Answer:<\/strong><\/p>

State is a component’s internal data, managed within the component itself, while props are external data passed to the component by its parent.<\/p>

\n

\/\/ State (internal)
\nconst [count, setCount] = useState(0);<\/p>\n

\/\/ Props (external)
\nconst ChildComponent = ({ message }) => <Text>{message}<\/Text>;<\/p>\n<\/div><\/div>

17. How do you use the Context API for state management in React Native?<\/h3>

Answer:<\/strong><\/p>

Create a context using React.createContext<\/strong>, and use Provider<\/strong> to pass the state to child components.<\/p>

\n

const MyContext = React.createContext();<\/p>\n

const App = () => {
\nconst [value, setValue] = useState(‘Hello’);<\/p>\n

return (
\n<MyContext.Provider value={value}>
\n<ChildComponent \/>
\n<\/MyContext.Provider>
\n);
\n};<\/p>\n<\/div><\/div>

18. How do you use the useReducer hook in React Native?<\/h3>

Answer:<\/strong><\/p>

useReducer<\/strong> is an alternative to useState<\/strong> for managing more complex state logic in React Native components.<\/p>

\n

const reducer = (state, action) => {
\nswitch (action.type) {
\ncase ‘increment’:
\nreturn { count: state.count + 1 };
\ndefault:
\nreturn state;
\n}
\n};<\/p>\n

const App = () => {
\nconst [state, dispatch] = useReducer(reducer, { count: 0 });<\/p>\n

return (
\n<View>
\n<Text>{state.count}<\/Text>
\n<Button title=”Increment” onPress={() => dispatch({ type: ‘increment’ })} \/>
\n<\/View>
\n);
\n};<\/p>\n<\/div><\/div>

19. How do you manage global state in a React Native app using Redux?<\/h3>

Answer:<\/strong><\/p>

Set up Redux by creating a store, defining reducers, and using the Provider<\/strong> to make the store available to the app.<\/p>

\n

import { createStore } from ‘redux’;
\nimport { Provider } from ‘react-redux’;<\/p>\n

const reducer = (state = { count: 0 }, action) => {
\nswitch (action.type) {
\ncase ‘INCREMENT’:
\nreturn { …state, count: state.count + 1 };
\ndefault:
\nreturn state;
\n}
\n};<\/p>\n

const store = createStore(reducer);<\/p>\n

const App = () => (
\n<Provider store={store}>
\n<MyComponent \/>
\n<\/Provider>
\n);<\/p>\n<\/div><\/div>

20. How do you connect a component to the Redux store in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the connect<\/strong> function from react-redux<\/strong> to map state and dispatch to the component’s props.<\/p>

\n

import { connect } from ‘react-redux’;<\/p>\n

const MyComponent = ({ count, increment }) => (
\n<View>
\n<Text>{count}<\/Text>
\n<Button title=”Increment” onPress={increment} \/>
\n<\/View>
\n);<\/p>\n

const mapStateToProps = state => ({
\ncount: state.count,
\n});<\/p>\n

const mapDispatchToProps = dispatch => ({
\nincrement: () => dispatch({ type: ‘INCREMENT’ }),
\n});<\/p>\n

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);<\/p>\n<\/div><\/div>

21. How do you make API requests in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the fetch<\/strong> API or a library like axios<\/strong> to make HTTP requests to a backend service.<\/p>

\n

useEffect(() => {<\/p>\n

fetch(‘https:\/\/api.example.com\/data’)
\n.then(response => response.json())
\n.then(data => console.log(data));
\n}, []);<\/p>\n<\/div><\/div>

22. How do you handle API request errors in React Native?<\/h3>

Answer:<\/strong><\/p>

Use try-catch<\/strong> blocks or .catch()<\/strong> method to handle errors in API requests.<\/p>

\n

useEffect(() => {
\nconst fetchData = async () => {
\ntry {
\nconst response = await fetch(‘https:\/\/api.example.com\/data’);
\nconst data = await response.json();
\nconsole.log(data);
\n} catch (error) {
\nconsole.error(‘Error fetching data:’, error);
\n}
\n};<\/p>\n

fetchData();
\n}, []);<\/p>\n<\/div><\/div>

23. How do you use the useEffect hook to fetch data in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the useEffect<\/strong> hook to fetch data when a component mounts, and update the state with the fetched data.<\/p>

\n

useEffect(() => {
\nfetch(‘https:\/\/api.example.com\/data’)
\n.then(response => response.json())
\n.then(data => setData(data));
\n}, []);<\/p>\n<\/div><\/div>

24. How do you manage loading and error states while fetching data in React Native?<\/h3>

Answer:<\/strong><\/p>

Use state variables to track loading and error states, and conditionally render UI based on these states.<\/p>

\n

const [loading, setLoading] = useState(true);
\nconst [error, setError] = useState(null);
\nconst [data, setData] = useState(null);<\/p>\n

useEffect(() => {
\nfetch(‘https:\/\/api.example.com\/data’)
\n.then(response => response.json())
\n.then(data => {
\nsetData(data);
\nsetLoading(false);
\n})
\n.catch(error => {
\nsetError(error);
\nsetLoading(false);
\n});
\n}, []);<\/p>\n<\/div><\/div>

25. How do you implement pagination in React Native while fetching data from an API?<\/h3>

Answer:<\/strong><\/p>

Implement pagination by maintaining a page state, fetching data based on the current page, and updating the page number for subsequent requests.<\/p>

\n

const [page, setPage] = useState(1);
\nconst [items, setItems] = useState([]);<\/p>\n

const fetchData = () => {
\nfetch(`https:\/\/api.example.com\/data?page=${page}`)
\n.then(response => response.json())
\n.then(newItems => setItems([…items, …newItems]));
\n};<\/p>\n

useEffect(() => {
\nfetchData();
\n}, [page]);<\/p>\n<\/div><\/div>

26. What are native modules in React Native, and why are they used?<\/h3>

Answer:<\/strong><\/p>

Native modules are custom modules written in native code (Java\/Objective-C\/Swift) that extend React Native’s functionality, allowing you to access platform-specific APIs.<\/p>

\n

import { NativeModules } from ‘react-native’;
\nconst { MyNativeModule } = NativeModules;<\/p>\n<\/div><\/div>

27. How do you bridge a native module to React Native?<\/h3>

Answer:<\/strong><\/p>

Create a native module in Java\/Objective-C\/Swift and expose it to React Native using the ReactMethod<\/strong> annotation (Android) or RCT_EXPORT_MODULE<\/strong> macro (iOS).<\/p>

\n

\/\/ Android example
\npackage com.myapp;<\/p>\n

import com.facebook.react.bridge.ReactApplicationContext;
\nimport com.facebook.react.bridge.ReactContextBaseJavaModule;
\nimport com.facebook.react.bridge.ReactMethod;
\nimport com.facebook.react.bridge.Promise;<\/p>\n

public class MyModule extends ReactContextBaseJavaModule {
\n@Override
\npublic String getName() {
\nreturn “MyModule”;
\n}<\/p>\n

@ReactMethod
\npublic void doSomething(Promise promise) {
\npromise.resolve(“Success”);
\n}
\n}<\/p>\n<\/div><\/div>

28. How do you call a native method from React Native?<\/h3>

Answer:<\/strong><\/p>

Call a native method using NativeModules<\/strong> after importing it into your React Native component.<\/p>

\n

import { NativeModules } from ‘react-native’;
\nconst { MyModule } = NativeModules;<\/p>\n

MyModule.doSomething()
\n.then(result => console.log(result))
\n.catch(error => console.error(error));<\/p>\n<\/div><\/div>

29. How do you handle permissions in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the PermissionsAndroid<\/strong> module on Android or the react-native-permissions<\/strong> library to request and check permissions.<\/p>

\n

import { PermissionsAndroid } from ‘react-native’;<\/p>\n

const requestCameraPermission = async () => {
\ntry {
\nconst granted = await PermissionsAndroid.request(
\nPermissionsAndroid.PERMISSIONS.CAMERA,
\n{
\ntitle: “Camera Permission”,
\nmessage: “App needs camera access”,
\nbuttonNeutral: “Ask Me Later”,
\nbuttonNegative: “Cancel”,
\nbuttonPositive: “OK”
\n}
\n);
\nif (granted === PermissionsAndroid.RESULTS.GRANTED) {
\nconsole.log(“You can use the camera”);
\n} else {
\nconsole.log(“Camera permission denied”);
\n}
\n} catch (err) {
\nconsole.warn(err);
\n}
\n};<\/p>\n<\/div><\/div>

30. How do you integrate third-party native libraries in React Native?<\/h3>

Answer:<\/strong><\/p>

Integrate third-party native libraries by linking them using react-native link<\/strong> (for older versions) or using the pod install<\/strong> command for iOS and manual linking for Android.<\/p>

\n

npm install react-native-device-info
\ncd ios
\npod install<\/p>\n<\/div><\/div>

31. How do you implement global theming in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the Context API<\/strong> or a theming library like styled-components<\/strong> to manage global themes across the app.<\/p>

\n

import { ThemeProvider } from ‘styled-components’;<\/p>\n

const theme = {
\ncolors: {
\nprimary: ‘#3498db’,
\nsecondary: ‘#2ecc71’,
\n},
\n};<\/p>\n

const App = () => (
\n<ThemeProvider theme={theme}>
\n<MyComponent \/>
\n<\/ThemeProvider>
\n);<\/p>\n<\/div><\/div>

32. How do you create responsive layouts in React Native?<\/h3>

Answer:<\/strong><\/p>

Use Dimensions<\/strong>, flexbox<\/strong>, or third-party libraries like react-native-responsive-screen<\/strong> to create responsive layouts.<\/p>

\n

import { Dimensions, StyleSheet, View, Text } from ‘react-native’;<\/p>\n

const { width, height } = Dimensions.get(‘window’);<\/p>\n

const styles = StyleSheet.create({
\ncontainer: {
\nwidth: width * 0.8,
\nheight: height * 0.5,
\nbackgroundColor: ‘lightgray’,
\n},
\n});<\/p>\n

const App = () => (
\n<View style={styles.container}>
\n<Text>Responsive Layout<\/Text>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

33. How do you apply platform-specific styles in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the Platform<\/strong> module to apply platform-specific styles in your React Native components.<\/p>

\n

import { Platform, StyleSheet, View, Text } from ‘react-native’;<\/p>\n

const styles = StyleSheet.create({
\ntext: {
\n…Platform.select({
\nios: {
\nfontFamily: ‘Avenir’,
\nfontSize: 20,
\n},
\nandroid: {
\nfontFamily: ‘Roboto’,
\nfontSize: 18,
\n},
\n}),
\n},
\n});<\/p>\n

const App = () => (
\n<View>
\n<Text style={styles.text}>Platform-specific styles<\/Text>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

34. How do you use Flexbox for layout in React Native?<\/h3>

Answer:<\/strong><\/p>

Flexbox is the primary layout system in React Native, allowing you to align and distribute space among items in a container.<\/p>

\n

const styles = StyleSheet.create({
\ncontainer: {
\nflex: 1,
\nflexDirection: ‘row’,
\njustifyContent: ‘space-between’,
\nalignItems: ‘center’,
\n},
\nbox: {
\nwidth: 50,
\nheight: 50,
\nbackgroundColor: ‘blue’,
\n},
\n});<\/p>\n

const App = () => (
\n<View style={styles.container}>
\n<View style={styles.box} \/>
\n<View style={styles.box} \/>
\n<View style={styles.box} \/>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

35. How do you implement dark mode in a React Native app?<\/h3>

Answer:<\/strong><\/p>

Use the useColorScheme<\/strong> hook or Appearance<\/strong> API to detect the system theme and apply dark mode styles accordingly.<\/p>

\n

import { useColorScheme } from ‘react-native’;<\/p>\n

const App = () => {
\nconst scheme = useColorScheme();<\/p>\n

const backgroundColor = scheme === ‘dark’ ? ‘black’ : ‘white’;
\nconst textColor = scheme === ‘dark’ ? ‘white’ : ‘black’;<\/p>\n

return (
\n<View style={{ backgroundColor, flex: 1 }}>
\n<Text style={{ color: textColor }}>Hello, World!<\/Text>
\n<\/View>
\n);
\n};<\/p>\n<\/div><\/div>

36. How do you create simple animations in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the Animated<\/strong> API to create simple animations by interpolating values and applying them to styles.<\/p>

\n

import { Animated } from ‘react-native’;<\/p>\n

const App = () => {
\nconst fadeAnim = new Animated.Value(0);<\/p>\n

Animated.timing(fadeAnim, {
\ntoValue: 1,
\nduration: 1000,
\nuseNativeDriver: true,
\n}).start();<\/p>\n

return (
\n<Animated.View style={{ opacity: fadeAnim }}>
\n<Text>Fading in<\/Text>
\n<\/Animated.View>
\n);
\n};<\/p>\n<\/div><\/div>

37. How do you create a looping animation in React Native?<\/h3>

Answer:<\/strong><\/p>

Use Animated.loop()<\/strong> to create a looping animation that repeats indefinitely or a specified number of times.<\/p>

\n

const spinValue = new Animated.Value(0);<\/p>\n

Animated.loop(
\nAnimated.timing(spinValue, {
\ntoValue: 1,
\nduration: 2000,
\nuseNativeDriver: true,
\n})
\n).start();<\/p>\n

const spin = spinValue.interpolate({
\ninputRange: [0, 1],
\noutputRange: [‘0deg’, ‘360deg’],
\n});<\/p>\n

return <Animated.View style={{ transform: [{ rotate: spin }] }} \/>;<\/p>\n<\/div><\/div>

38. How do you create staggered animations in React Native?<\/h3>

Answer:<\/strong><\/p>

Use Animated.stagger()<\/strong> to create a sequence of animations that start after a specified delay.<\/p>

\n

const fadeAnim1 = new Animated.Value(0);
\nconst fadeAnim2 = new Animated.Value(0);<\/p>\n

Animated.stagger(500, [
\nAnimated.timing(fadeAnim1, { toValue: 1, duration: 1000, useNativeDriver: true }),
\nAnimated.timing(fadeAnim2, { toValue: 1, duration: 1000, useNativeDriver: true }),
\n]).start();<\/p>\n

return (
\n<View>
\n<Animated.View style={{ opacity: fadeAnim1 }} \/>
\n<Animated.View style={{ opacity: fadeAnim2 }} \/>
\n<\/View>
\n);<\/p>\n<\/div><\/div>

39. How do you animate list items when they appear in React Native?<\/h3>

Answer:<\/strong><\/p>

Use the LayoutAnimation<\/strong> module to animate changes in the layout, such as the insertion of new list items.<\/p>

\n

import { LayoutAnimation, UIManager, Platform, View, Button } from ‘react-native’;<\/p>\n

if (Platform.OS === ‘android’) {
\nUIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
\n}<\/p>\n

const App = () => {
\nconst [items, setItems] = useState([]);<\/p>\n

const addItem = () => {
\nLayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
\nsetItems([…items, { id: items.length, name: `Item ${items.length}` }]);
\n};<\/p>\n

return (
\n<View>
\n{items.map(item => (
\n<View key={item.id}>
\n<Text>{item.name}<\/Text>
\n<\/View>
\n))}
\n<Button title=”Add Item” onPress={addItem} \/>
\n<\/View>
\n);
\n};<\/p>\n<\/div><\/div>

40. How do you use the useNativeDriver option in React Native animations?<\/h3>

Answer:<\/strong><\/p>

The useNativeDriver<\/strong> option allows animations to run on the native thread for better performance, but it only works with properties like opacity and transforms.<\/p>

\n

Animated.timing(fadeAnim, {
\ntoValue: 1,
\nduration: 1000,
\nuseNativeDriver: true, \/\/ Enable native driver
\n}).start();<\/p>\n<\/div><\/div>

41. How do you write unit tests for React Native components?<\/h3>

Answer:<\/strong><\/p>

Use the Jest<\/strong> testing framework and react-test-renderer<\/strong> to write unit tests for React Native components.<\/p>

\n

import React from ‘react’;
\nimport renderer from ‘react-test-renderer’;
\nimport MyComponent from ‘..\/MyComponent’;<\/p>\n

test(‘renders correctly’, () => {
\nconst tree = renderer.create(<MyComponent \/>).toJSON();
\nexpect(tree).toMatchSnapshot();
\n});<\/p>\n<\/div><\/div>

42. How do you perform snapshot testing in React Native?<\/h3>

Answer:<\/strong><\/p>

Snapshot testing involves rendering a component and saving its output to a file, which is then compared with future renders to ensure consistency.<\/p>

\n

import renderer from ‘react-test-renderer’;<\/p>\n

test(‘MyComponent renders correctly’, () => {
\nconst tree = renderer.create(<MyComponent \/>).toJSON();
\nexpect(tree).toMatchSnapshot();
\n});<\/p>\n<\/div><\/div>

43. How do you mock API calls in React Native tests?<\/h3>

Answer:<\/strong><\/p>

Use jest.mock<\/strong> to mock API calls in your tests, ensuring that tests run without making actual network requests.<\/p>

\n

jest.mock(‘axios’);<\/p>\n

test(‘fetches data successfully’, async () => {
\naxios.get.mockResolvedValue({ data: { id: 1, name: ‘John Doe’ } });
\nconst data = await fetchData();
\nexpect(data.name).toBe(‘John Doe’);
\n});<\/p>\n<\/div><\/div>

44. How do you test asynchronous code in React Native?<\/h3>

Answer:<\/strong><\/p>

Use async\/await<\/strong> in your tests to handle asynchronous operations and make assertions after the async code has run.<\/p>

\n

test(‘async function returns data’, async () => {
\nconst data = await asyncFunction();
\nexpect(data).toBe(‘expectedData’);
\n});<\/p>\n<\/div><\/div>

45. How do you perform end-to-end (E2E) testing in React Native?<\/h3>

Answer:<\/strong><\/p>

Use tools like Detox<\/strong> to perform end-to-end testing by simulating user interactions and validating app behavior.<\/p>

\n

detox init -r jest
\ndetox test<\/p>\n<\/div><\/div>

46. How do you optimize React Native performance by avoiding unnecessary re-renders?<\/h3>

Answer:<\/strong><\/p>

Use React.memo<\/strong> for functional components and PureComponent<\/strong> for class components to prevent unnecessary re-renders.<\/p>

\n

const MyComponent = React.memo(({ prop1 }) => {
\nreturn <Text>{prop1}<\/Text>;
\n});<\/p>\n<\/div><\/div>

47. How do you improve the performance of large lists in React Native?<\/h3>

Answer:<\/strong><\/p>

Use FlatList<\/strong> or SectionList<\/strong> with optimizations like getItemLayout<\/strong>, initialNumToRender<\/strong>, and removeClippedSubviews<\/strong>.<\/p>

\n

<FlatList
\ndata={data}
\nrenderItem={renderItem}
\nkeyExtractor={item => item.id}
\ninitialNumToRender={10}
\ngetItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })}
\nremoveClippedSubviews={true}
\n\/><\/p>\n<\/div><\/div>

48. How do you reduce the app bundle size in React Native?<\/h3>

Answer:<\/strong><\/p>

Reduce app bundle size by enabling Proguard<\/strong> for Android, using Hermes<\/strong> engine, and removing unused dependencies.<\/p>

\n

\/\/ Enable Hermes in android\/app\/build.gradle
\nproject.ext.react = [
\nenableHermes: true
\n]\n<\/p><\/div><\/div>

49. How do you optimize image loading in React Native?<\/h3>

Answer:<\/strong><\/p>

Optimize images by using appropriate formats, compressing images, and using tools like react-native-fast-image<\/strong> for better performance.<\/p>

\n

import FastImage from ‘react-native-fast-image’;<\/p>\n

<FastImage
\nstyle={{ width: 200, height: 200 }}
\nsource={{
\nuri: ‘https:\/\/example.com\/image.png’,
\npriority: FastImage.priority.high,
\n}}
\nresizeMode={FastImage.resizeMode.cover}
\n\/><\/p>\n<\/div><\/div>

50. How do you handle memory leaks in React Native applications?<\/h3>

Answer:<\/strong><\/p>

Handle memory leaks by unmounting components properly, cleaning up event listeners, and avoiding long-running timers.<\/p>

\n

useEffect(() => {
\nconst timer = setInterval(() => {
\nconsole.log(‘Interval running’);
\n}, 1000);<\/p>\n

return () => clearInterval(timer); \/\/ Cleanup
\n}, []);<\/p>\n<\/div><\/div>

Final Words<\/h2>

Getting ready for an interview can feel overwhelming, but going through these React Native fresher interview questions can help you feel more confident. This guide focuses on the kinds of React Native-related interview questions for fresher roles that you’re likely to face.<\/p>

Don’t forget to practice the React Native basics, component lifecycle, and state management-related interview questions too! With the right preparation, you’ll ace your React Native interview and take that important step in your career.<\/p>

Frequently Asked Questions<\/h2>

1. What are the most common interview questions for React Native?<\/h3>

The most common interview questions for React Native often cover topics like component lifecycle, state and props, navigation, and styling with React Native’s styling system.<\/p>

2. What are the important React Native topics freshers should focus on for interviews?<\/h3>

The important React Native topics freshers should focus on include understanding components, handling state and props, navigation with React Navigation, and integrating with native modules.<\/p>

3. How should freshers prepare for React Native technical interviews?<\/h3>

Freshers should prepare for React Native technical interviews by building sample apps, practicing common UI challenges, and understanding the differences between React and React Native.<\/p>

4. What strategies can freshers use to solve React Native coding questions during interviews?<\/h3>

Strategies freshers can use include breaking down the problem, efficiently managing state, and testing components to ensure they render correctly on different devices.<\/p>

5. Should freshers prepare for advanced React Native topics in interviews?<\/h3>

Yes, freshers should prepare for advanced React Native topics like performance optimization, handling animations, and integrating with native APIs if the role requires a deeper understanding of React Native.<\/p>

Explore More React Native Resources<\/h2>