New 80 React Native Interview Questions

New 80 React Native Interview Questions

Deepak Vishwakarma

Table of Contents

Introduction

React Native is a popular framework for building mobile applications using JavaScript. If you’re preparing for a React Native interview, here’s a user-friendly introduction to the potential questions you might encounter. React Native interview questions often cover topics like the basics of React Native, its key features, and the development process. They may ask about components, navigation, state management, debugging, performance optimization, and integrating native modules. Familiarity with JavaScript, React, and mobile app development concepts will be beneficial. By preparing for these questions, you can demonstrate your understanding of React Native and increase your chances of success in the interview.

Basic Questions

1. What is React Native?

React Native is a framework for building mobile applications using JavaScript and React. It allows developers to create cross-platform mobile apps that can run on both iOS and Android devices.

Example:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

2. How is React Native different from React?

React is a JavaScript library for building user interfaces, primarily for web applications. React Native, on the other hand, is specifically designed for building mobile applications. While both use the concept of components and a virtual DOM, React Native components are mobile-specific and use native UI elements instead of HTML elements.

Example – React:

JSX
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

export default App;

Example – React Native (Same as previous):

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

3. Can you explain the basic architecture of a React Native app?

A React Native app follows a single-threaded model and has the following architecture:

  • JavaScript Codebase: The app’s logic is written in JavaScript, which interacts with the native modules using bridge communication.
  • Bridge: React Native has a bridge that allows communication between JavaScript and native modules. It passes messages and handles UI components rendering on native views.
  • Native Modules: These are platform-specific modules written in Java/Kotlin for Android and Objective-C/Swift for iOS. They expose native functionalities to the JavaScript code.
  • UI Thread: The native UI components are rendered on a separate UI thread to ensure smooth performance.

4. What are the main advantages of using React Native?

  • Cross-platform: Allows building apps for both iOS and Android platforms using the same codebase.
  • Reusable components: Components can be reused across platforms, reducing development time.
  • Hot Reloading: Developers can see changes instantly without rebuilding the entire app.
  • Native Performance: Utilizes native components for performance-critical operations.
  • Large Community: A vast community and ecosystem, providing a wealth of libraries and resources.

5. What are the limitations of React Native?

  • Performance: In complex apps, React Native may suffer from slower performance compared to fully native apps.
  • Native Dependencies: Certain platform-specific features might require native modules and additional setup.
  • Third-party Modules: Some third-party libraries might not be compatible or well-maintained.
  • UI Limitations: React Native’s components may not cover all native UI elements, requiring custom implementations.
  • Debugging: Debugging can be more challenging in React Native compared to web development.

6. What is the virtual DOM in React Native? Give a relevant code example.

The virtual DOM is a lightweight copy of the actual DOM, maintained by React, that enables efficient updates and reconciliation of changes before rendering.

Example:

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

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

export default Counter;

7. Can you name some applications built with React Native?

Some popular applications built with React Native include:

  • Facebook
  • Instagram
  • Pinterest
  • Skype
  • Bloomberg
  • Uber Eats
  • Discord
  • Wix
  • Tesla (for some parts of their app)

8. How does React Native handle rendering on different platforms like iOS and Android?

React Native uses platform-specific components for rendering on different platforms. These components are mapped to native UI elements for iOS and Android.

Example:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {Platform.OS === 'ios' ? 'iOS' : 'Android'} App
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: Platform.OS === 'ios' ? 'blue' : 'green',
  },
});

export default App;

9. What is JSX and how is it used in React Native?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write XML-like code for creating React elements. It provides a more readable and expressive way to define UI components.

Example:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, JSX!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

10. What are state and props in React Native?

  • State: State is a data structure that holds information about the component and can be changed over time. It is mutable and managed internally by the component.
  • Props: Props (short for properties) are read-only values that are passed from a parent component to a child component. They are used to pass data and configuration to components.

Example:

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

const Counter = (props) => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + props.step);
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Counter;

11. How do you handle state management in a React Native application?

In React Native, you can handle state management using built-in React hooks like useState or external libraries like Redux or MobX.

Example using useState:

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

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Counter;

12. What are components in React Native?

Components are the building blocks of a React Native app. They are reusable, self-contained pieces of UI that can be composed to create complex user interfaces.

Example of a simple functional component:

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

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello from MyComponent!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyComponent;

13. What is the difference between functional and class components in React Native?

Functional components are written as JavaScript functions and are stateless. They are simpler and easier to test. Class components, on the other hand, are ES6 classes that can have a state. They were used more often before React introduced hooks.

Example of a functional component:

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

const MyFunctionalComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello from Functional Component!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyFunctionalComponent;

Example of a class component:

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

class MyClassComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello from Class Component!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MyClassComponent;

14. What is a stateless component?

A stateless component (also known as a functional component) is a component that doesn’t have its own state. It takes props as input and returns the UI to render.

Example:

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

const StatelessComponent = (props) => {
  return (
    <View style={styles.container}>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default StatelessComponent;

15. What are React Native modules?

React Native modules are JavaScript objects that expose native functionalities to JavaScript code using the bridge.

Example of a custom module that doubles a number:

JSX
// CustomNativeModule.js (Native Module)

import { NativeModules } from 'react-native';

const CustomNativeModule = NativeModules.CustomNativeModule;

export default CustomNativeModule;
JSX
// CustomNativeModule.java (Android)

package com.yourapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class CustomNativeModule extends ReactContextBaseJavaModule {
    public CustomNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "CustomNativeModule";
    }

    @ReactMethod
    public int doubleNumber(int number) {
        return number * 2;
    }
}

Example of using the custom module:

JSX
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import CustomNativeModule from './CustomNativeModule';

const App = () => {
  const result = CustomNativeModule.doubleNumber(5);
  return (
    <View style={styles.container}>
      <Text>Doubled Number: {result}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

16. What is the purpose of the ‘this’ keyword in React Native?

The this keyword is used to refer to the current instance of a class or an object in JavaScript. In React Native class components, you often use this to access props, state, and other class methods.

Example in a class component:

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

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.handleIncrement} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Counter;

17. What is Redux and how is it used in a React Native application?

Redux is a state management library for JavaScript applications. It helps manage the global state of an application in a predictable and centralized way.

Example usage in a React Native app:

JSX
// store.js

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

const store = createStore(rootReducer);

export default store;

javascriptCopy code// reducers.js

const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

export default rootReducer;



// App.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';

const App = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

18. How does data flow in a Redux architecture?

In a Redux architecture, the data flow follows a unidirectional flow, known as the “Redux Data Flow” or the “Redux Cycle.” The flow consists of the following steps:

  1. Action: Actions are dispatched by components to indicate that some event has occurred.
  2. Reducer: Reducers are pure functions that handle the dispatched actions and modify the state accordingly.
  3. Store: The store holds the application state and is responsible for dispatching actions to reducers.
  4. State: The state is the single source of truth for the entire application.

Example:

JSX
// store.js

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

const store = createStore(rootReducer);

export default store;

javascriptCopy code// reducers.js

const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

export default rootReducer;



// App.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';

const App = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

19. What is the context API in React Native?

The context API in React Native allows you to pass data through the component tree without having to pass props manually at every level. It is useful for sharing state or data that is required by many components.

Example:

JSX
import React, { createContext, useState, useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const CountContext = createContext();

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <View style={styles.container}>
        <Text>Count: {count}</Text>
        <Button title="Increment" onPress={() => setCount(count + 1)} />
        <ChildComponent />
      </View>
    </CountContext.Provider>
  );
};

const ChildComponent = () => {
  const { count, setCount } = useContext(CountContext);

  return (
    <View style={styles.container}>
      <Text>Count in Child: {count}</Text>
      <Button title="Increment in Child" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

20. How is routing handled in React Native?

React Native doesn’t have built-in routing like React for the web. Developers often use third-party libraries like React Navigation to handle routing in React Native apps.

Example using React Navigation:

JSX
npm install @react-navigation/native @react-navigation/stack
JSX
import 'react-native-gesture-handler'; // Import this at the entry point of your app

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

21. What are some popular libraries used with React Native?

Some popular libraries used with React Native are:

  • React Navigation: For handling navigation and routing in React Native apps.
  • Redux: For managing global state in the application.
  • Axios: For handling network requests and API calls.
  • React Native Elements: A UI library providing pre-designed components.
  • React Native Paper: Another UI library with Material Design components.

Example using Axios:

JSX
npm install axios
JSX
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => setData(response.data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      {data.map((item) => (
        <Text key={item.id}>{item.title}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

22. What are keys in React Native and why are they important?

Keys are special attributes used in React Native when rendering lists of components. They help React identify which items have changed, added, or removed efficiently.

Example without keys (inefficient):

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

const App = () => {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <View style={styles.container}>
      {data.map((item) => (
        <Text>{item}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

In the above example, if the data array changes (e.g., a new item is added or an item is removed), React will have to re-render all the elements because it cannot distinguish which element corresponds to which item in the previous array.

Example with keys (efficient):

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

const App = () => {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <View style={styles.container}>
      {data.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

In this example, we use the index as the key, which allows React to efficiently update the DOM and only re-render the changed elements.

23. What are the lifecycle methods of a React Native component?

In React Native, class components have lifecycle methods that are called at different stages of the component’s life. Some commonly used lifecycle methods are:

  • componentDidMount: Called after the component is rendered to the screen.
  • componentWillUnmount: Called before the component is removed from the screen.

Example using componentDidMount:

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

class App extends Component {
  componentDidMount() {
    console.log('Component is mounted!');
  }

  componentWillUnmount() {
    console.log('Component is unmounted!');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Hello from Component!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

24. How do you handle forms in React Native?

Handling forms in React Native is similar to handling forms in React for the web. You can use state to keep track of form values and handle input changes.

Example:

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

const FormExample = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    console.log('Name:', name);
    console.log('Email:', email);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Name"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    borderWidth: 1,
    padding: 10,
    margin: 5,
    width: 200,
  },
});

export default FormExample;

25. What is the use of arrow functions in React Native?

Arrow functions in React Native (and React) are used for defining concise and straightforward function expressions. They automatically bind this to the context they are defined in, which is often useful in React components.

Example using an arrow function:

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

26. What is hot reloading and live reloading in React Native?

Hot Reloading and Live Reloading are features in React Native that allow developers to see the changes they make in the code instantly without rebuilding the entire app.

  • Hot Reloading: Only the modified component is reloaded while keeping the app state. It provides a smooth development experience and is the default option.
  • Live Reloading: The entire app is reloaded from the beginning, and the app state is reset.

Example:

JSX
// App.js

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

When you save changes to this component, Hot Reloading will update the component and retain the current count value without a full app reload.

27. How do you handle network requests in React Native?

React Native provides various options for handling network requests, including the built-in fetch function, Axios, or using native modules for platform-specific requirements.

Example using fetch:

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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <View style={styles.container}>
      {data.map((item) => (
        <Text key={item.id}>{item.title}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

28. How can you debug a React Native application?

To debug a React Native application, you can use the developer tools provided by the platform (Chrome DevTools for Android and Safari for iOS) or third-party tools like React Native Debugger.

Example using Chrome DevTools:

  1. Open your React Native app in the simulator/emulator or a physical device.
  2. Open Google Chrome and type chrome://inspect in the address bar.
  3. You should see your app listed under “Remote Target.” Click on the “Inspect” button to open DevTools.
  4. Now, you can use the “Elements” tab to inspect your app’s components, “Console” tab for logging, “Sources” tab for debugging JavaScript code, and more.

29. What are hooks in React Native?

Hooks are functions that allow you to use React features like state and lifecycle methods in functional components, making them more powerful and expressive.

Example using the useState hook:

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={handleIncrement} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;
</code>

30. What is the use of Flexbox in React Native?

Flexbox is a layout model in React Native that helps you create flexible and responsive layouts. It allows components to dynamically adjust their sizes based on available space.

Example using Flexbox:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
});

export default App;

In this example, the three boxes are evenly distributed horizontally within the container due to the use of Flexbox properties like flexDirection, justifyContent, and alignItems.

Intermediate Questions

1. What are Higher-Order Components (HOC) in React Native?

Higher-Order Components (HOC) are a pattern in React Native (and React) that allow you to reuse component logic by wrapping a component with another function. This function takes a component as input and returns a new component with additional props and behavior. HOCs are useful for cross-cutting concerns like logging, authorization, or data fetching.

JSX
// Higher-Order Component for logging props
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log("Props received:", this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// Usage of the Higher-Order Component
class MyComponent extends React.Component {
  render() {
    return <Text>{this.props.text}</Text>;
  }
}

const MyComponentWithLogger = withLogger(MyComponent);

// Now, use MyComponentWithLogger instead of MyComponent to log props

2. Can you explain the concept of a controlled component?

A controlled component is a React Native component whose value is controlled by the state of the parent component. It means that the parent component handles and manages the state and passes the value and event handlers as props to the controlled component. This way, the parent maintains full control over the component’s behavior, making it easy to manipulate and validate the user input.

JSX
class ControlledInput extends React.Component {
  render() {
    return (
      <TextInput
        value={this.props.value}
        onChangeText={this.props.onChangeText}
      />
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
    };
  }

  handleInputChange = (text) => {
    this.setState({ inputValue: text });
  };

  render() {
    return (
      <ControlledInput
        value={this.state.inputValue}
        onChangeText={this.handleInputChange}
      />
    );
  }
}

In this example, the ControlledInput is a controlled component because its value is managed by the ParentComponent, which passes the inputValue as props and updates it via the handleInputChange method.

3. How do you implement error handling in React Native?

Error handling in React Native involves catching and gracefully handling errors that might occur during the component lifecycle, data fetching, or asynchronous operations. One common way to handle errors is by using try-catch blocks or error state variables.

JSX
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      error: null,
    };
  }

  componentDidMount() {
    try {
      // Simulating an API call
      fetch("https://example.com/data")
        .then((response) => response.json())
        .then((data) => this.setState({ data }))
        .catch((error) => this.setState({ error: "Failed to fetch data" }));
    } catch (error) {
      this.setState({ error: "An unexpected error occurred" });
    }
  }

  render() {
    const { data, error } = this.state;

    if (error) {
      return <Text>Error: {error}</Text>;
    }

    if (!data) {
      return <Text>Loading...</Text>;
    }

    return <Text>{data}</Text>;
  }
}

In this example, the MyComponent attempts to fetch data from an API and updates the state accordingly. If there’s an error during the API call, it catches the error and updates the state with the error message, which is then displayed in the UI.

4. What is the use of refs in React Native?

Refs in React Native provide a way to access and interact with components or DOM elements directly. They are useful for scenarios where you need to trigger imperative actions like focusing an input, playing a video, or triggering animations.

JSX
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      <View>
        <TextInput ref={this.inputRef} />
        <Button title="Focus Input" onPress={this.focusInput} />
      </View>
    );
  }
}

In this example, this.inputRef is created using React.createRef(), and it is then attached to the TextInput component. When the button is pressed, the focusInput method is triggered, and it focuses the input element using the focus() method provided by the ref.

5. How can you embed native code in your React Native app?

To embed native code in a React Native app, you can use the “Native Modules” feature. Native Modules allow you to write custom native code in Java (for Android) or Objective-C/Swift (for iOS), and then expose this code to the JavaScript layer using a Native Module.

Here’s a high-level overview of the steps:

  1. Create Native Module: Write the native code in the respective language (Java/Objective-C/Swift) to implement the desired functionality.
  2. Expose the Module: Register the native module in React Native’s bridge to make it accessible from JavaScript.
  3. Use the Module in JavaScript: Import the native module in your JavaScript code and use its methods and functions.

Here’s a simplified example of embedding a native Toast functionality:

iOS:

Create a new Objective-C file MyToastModule.m:

Objective-C
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyToastModule, NSObject)

RCT_EXTERN_METHOD(showToast:(NSString *)message)

@end

Implement the MyToastModule.m:

Objective-C
#import "MyToastModule.h"
#import <React/RCTLog.h>

@implementation MyToastModule

RCT_EXTERN_METHOD(showToast:(NSString *)message)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Toast" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
    [alert addAction:okAction];

    UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
    [rootViewController presentViewController:alert animated:YES completion:nil];
  });
}

@end

Android:

Create a new Java file MyToastModule.java:

Java
package com.yourapp;

import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyToastModule extends ReactContextBaseJavaModule {
  private static ReactApplicationContext reactContext;

  MyToastModule(ReactApplicationContext context) {
    super(context);
    reactContext = context;
  }

  @ReactMethod
  public void showToast(String message) {
    Toast.makeText(reactContext, message, Toast.LENGTH_SHORT).show();
  }

  @Override
  public String getName() {
    return "MyToastModule";
  }
}

Make sure to register the module in the corresponding package:

Java
// MainApplication.java
package com.yourapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.asList(
        new MainReactPackage(),
        // Other packages
        // ...
        new MyToastPackage() // <- Add the custom package here
      );
    }
  };

  // Rest of the MainApplication class
  // ...
}

Now you can use the MyToastModule in JavaScript:

JavaScript
import { NativeModules } from 'react-native';

const { MyToastModule } = NativeModules;

// Call the method to show a toast
MyToastModule.showToast('Hello, this is a native toast!');

6. What are the methods used to handle app state restoration?

In React Native, you can handle app state restoration using two main methods:

  1. AsyncStorage: React Native provides an AsyncStorage module to store key-value pairs persistently. You can use this to save the app’s state before it gets suspended or terminated and then restore it when the app is launched again.

Example of saving and restoring state with AsyncStorage:

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

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Restore state from AsyncStorage on app launch
    AsyncStorage.getItem('count').then((storedCount) => {
      if (storedCount !== null) {
        setCount(parseInt(storedCount));
      }
    });
  }, []);

  useEffect(() => {
    // Save state to AsyncStorage when it changes
    AsyncStorage.setItem('count', count.toString());
  }, [count]);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};
  1. AppState API: The AppState API in React Native allows you to listen to changes in the app’s state (active, background, or inactive). You can use this API to save or update the app’s state when the app goes to the background and restore it when it becomes active again.

Example using AppState API:

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

const App = () => {
  const [count, setCount] = useState(0);

  const handleAppStateChange = (nextAppState) => {
    if (nextAppState === 'background') {
      // Save state to a storage solution (e.g., AsyncStorage) when app goes to background
      AsyncStorage.setItem('count', count.toString());
    } else if (nextAppState === 'active') {
      // Restore state from storage when app becomes active
      AsyncStorage.getItem('count').then((storedCount) => {
        if (storedCount !== null) {
          setCount(parseInt(storedCount));
        }
      });
    }
  };

  useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

Both methods provide a way to handle app state restoration and ensure a smooth user experience.

7. How do you implement navigation in React Native?

React Native offers multiple navigation solutions to navigate between screens and manage navigation history. Two popular navigation libraries are React Navigation and React Native Navigation. Here, we’ll use React Navigation as an example.

Step 1: Install React Navigation

JavaScript
npm install @react-navigation/native

Step 2: Install Dependencies

For Stack Navigator:

JavaScript
npm install @react-navigation/stack

For Bottom Tab Navigator:

JavaScript
npm install @react-navigation/bottom-tabs

Step 3: Create Navigation Stack

JavaScript
// In App.js

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

import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

Step 4: Create Screens

JSX
// HomeScreen.js

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

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

export default HomeScreen;
JSX
// DetailsScreen.js

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

const DetailsScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Welcome to Details Screen!</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
};

export default DetailsScreen;

In this example, the App component defines the navigation stack using createStackNavigator. It creates two screens: HomeScreen and DetailsScreen. The navigation.navigate function is used to navigate from HomeScreen to DetailsScreen, and navigation.goBack is used to go back to the previous screen.

8. What are some performance considerations in React Native applications?

Optimizing performance in React Native is crucial to ensure smooth and responsive user experiences. Some performance considerations include:

  1. Virtualization: Use FlatList or SectionList for long lists to implement virtualization. Virtualized lists render only the visible items on the screen, reducing memory usage and rendering time.
  2. Minimize Renders: Avoid unnecessary renders by using React.memo, shouldComponentUpdate, or PureComponent to prevent components from updating when their props and state haven’t changed.
  3. Avoid Inline Functions: Refrain from using inline functions as props, as they create new function instances on each render, leading to unnecessary re-renders.
  4. Images Optimization: Optimize images for different screen densities and sizes to reduce the app’s bundle size and loading time. Use formats like WebP for better compression.
  5. Bundling and Code Splitting: Use dynamic imports or libraries like react-loadable to split the app code into smaller chunks, loading only the required components when needed.
  6. Use Native Modules: Offload CPU-intensive tasks to native modules to take advantage of the platform’s performance.
  7. Memory Management: Avoid memory leaks by cleaning up event listeners, timers, and subscriptions when a component unmounts.
  8. Reduce Re-renders: Profile and optimize components that re-render frequently. Use React DevTools or other profiling tools to identify performance bottlenecks.
  9. Use React Native Performance Tools: Utilize tools like Systrace and React DevTools to analyze performance and identify areas for improvement.
  10. UI Thread Optimization: Use InteractionManager to schedule work when the UI thread is idle, ensuring a smoother user experience.

9. What is the use of Context in React Native?

Context is an essential feature in React Native that allows data to be passed through the component tree without explicitly passing props at each level. It enables global state management and simplifies the process of sharing data between components that are not directly related.

Here’s an example of using Context in React Native:

JSX
// Create a Context
const UserContext = React.createContext();

// Create a Provider
const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

// Usage of Context in Components
const WelcomeScreen = () => {
  const { user } = useContext(UserContext);

  return (
    <View>
      <Text>Welcome, {user ? user.name : "Guest"}!</Text>
    </View>
  );
};

const LoginScreen = () => {
  const { setUser } = useContext(UserContext);

  const handleLogin = () => {
    // Assuming login process sets the user object
    setUser({ name: "John" });
  };

  return (
    <View>
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

// Wrap the top-level component with the Provider
const App = () => {
  return (
    <UserProvider>
      <WelcomeScreen />
      <LoginScreen />
    </UserProvider>
  );
};

In this example, we created a UserContext using React.createContext(). The UserProvider component wraps the top-level component (App) and provides the user data and a function to update the user data as the context value. Any component within the UserProvider can access and modify the user data using the useContext hook.

10. Can you explain how to create animations in React Native?

React Native provides an Animated API that allows you to create animations for various components. The Animated API enables smooth animations by mapping animations to native threads rather than JavaScript, ensuring better performance.

Here’s an example of creating a simple fade-in animation using the Animated API:

JSX
import React, { useEffect, useRef } from 'react';
import { View, Animated, Text, Button } from 'react-native';

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
};

const App = () => {
  return (
    <View>
      <FadeInView style={{ padding: 20 }}>
        <Text>Fade-in Animation</Text>
      </FadeInView>
      <Button title="Trigger Animation Again" onPress={() => this.forceUpdate()} />
    </View>
  );
};

export default App;

In this example, the FadeInView component uses the Animated API to animate the opacity from 0 to 1. The useNativeDriver option is set to true, which ensures that the animation runs on the native thread for better performance.

11. How do you manage dependencies in a React Native application?

Managing dependencies in a React Native application is similar to managing dependencies in a regular Node.js project, but with some additional considerations due to native modules.

Here are the main steps to manage dependencies in a React Native application:

  1. Package Management: Use either npm or yarn to manage your project’s dependencies. yarn is often recommended for React Native projects due to its performance and lockfile support.
  2. Installing Dependencies: To install a new dependency, run the following command:
JSX
   # Using npm
   npm install <package-name>

   # Using yarn
   yarn add <package-name>
  1. Version Management: Specify the package versions in your package.json file. It’s essential to use version ranges carefully to avoid breaking changes in future updates.
JSX
   {
     "dependencies": {
       "react": "^16.13.1",
       "react-native": "^0.63.4",
       "some-package": "2.0.0"
     }
   }
  1. Linking Native Modules: Some packages include native code that needs to be linked to your project. React Native CLI automatically links most packages, but some might require manual linking.
JSX
   # For auto-linking
   react-native link
  1. Avoiding Duplicate Dependencies: Ensure that you don’t have multiple versions of the same package installed. This can lead to conflicts and unexpected behavior.
  2. Updating Dependencies: Regularly update your dependencies to the latest versions. Be cautious of breaking changes, and thoroughly test your application after updating.
JSX
   # Update all dependencies to their latest versions
   # Using npm
   npm update

   # Using yarn
   yarn upgrade
  1. Lockfile Management: If using yarn, commit the yarn.lock file to version control to ensure consistent installations across different environments.
  2. Check Compatibility: Always check if a package is compatible with the version of React Native and other dependencies in your project.

12. What is the React Native bridge?

The React Native bridge is a communication layer that allows JavaScript code to interact with native code in Android and iOS. It enables seamless integration of native functionality and UI components into a React Native application.

When you write React Native code, it runs in a JavaScript runtime environment on a separate thread (JavaScript thread). However, most of the native functionality and UI components exist on the native thread (UI thread). The bridge connects these two threads, enabling them to exchange data and trigger actions.

For example, when you use a TextInput component in React Native, it ultimately renders the native TextInput component on the platform. The React Native bridge facilitates communication between the JavaScript TextInput and the native TextInput.

The bridge has two main responsibilities:

  1. Serialization and Deserialization: The bridge converts data between JavaScript and native formats. For example, when sending a prop from JavaScript to a native module, the bridge serializes the JavaScript data to a format that native code understands.
  2. Execution of Native Methods: The bridge executes native methods and functions based on instructions received from JavaScript. For instance, when you call a function from a native module in JavaScript, the bridge invokes the corresponding native method on the UI thread.

13. What is the use of the ‘shouldComponentUpdate’ method in React Native?

In React Native, the shouldComponentUpdate method is a lifecycle hook that you can use to optimize performance by preventing unnecessary re-renders of components. It is called before the render method and allows you to control whether a component should update or not based on the changes in its props and state.

By default, when the props or state of a component change, React Native will re-render the component and its child components. However, sometimes re-rendering is not necessary, especially if the new props or state values are the same as the previous ones.

You can use shouldComponentUpdate to provide a custom comparison logic to determine if re-rendering is necessary. If the method returns false, the component will not re-render.

Example usage of shouldComponentUpdate:

JSX
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Custom comparison logic
    if (nextProps.someValue === this.props.someValue) {
      return false; // Avoid re-render if the value is the same
    }
    return true; // Allow re-render for other cases
  }

  render() {
    return <Text>{this.props.someValue}</Text>;
  }
}

In this example, the MyComponent will only re-render if the someValue prop changes, and it will skip re-rendering if the value remains the same.

14. How can you test React Native applications?

Testing is an essential part of developing robust React Native applications. You can use various testing approaches and tools to ensure the quality of your app.

  1. Unit Testing: Use testing libraries like Jest to perform unit testing on individual components, functions, and utilities.
  2. Component Testing: Use react-native-testing-library or Enzyme to test React Native components in isolation.
  3. Integration Testing: Perform integration testing by rendering multiple components together to ensure they work correctly as a whole.
  4. Snapshot Testing: Use Jest snapshots to capture the rendered output of components and automatically check for changes.
  5. End-to-End Testing: Use tools like Detox or Appium to perform end-to-end testing on the entire application running in a simulator or on a real device.
  6. Mocking Dependencies: Use Jest or other libraries to mock external dependencies and APIs during testing.
  7. Coverage Reporting: Utilize tools like Jest coverage reporting to identify areas of your codebase that lack test coverage.
  8. Continuous Integration: Integrate your tests into your CI/CD pipeline to ensure that tests are executed automatically with every code change.
  9. Manual Testing: Test your application manually on different devices and operating systems to identify user experience issues.
  10. Accessibility Testing: Test your application for accessibility compliance using tools like react-native-accessibility-engine.
  11. Performance Testing: Use profiling tools like Systrace and React DevTools to analyze performance and identify potential bottlenecks.

15. How would you manage user authentication in React Native?

Managing user authentication in React Native involves several steps to ensure secure and seamless user experiences. Here’s a high-level overview of the process:

  1. User Registration and Login: Implement user registration and login forms in your app using secure methods like HTTPS and bcrypt for password hashing.
  2. Token-Based Authentication: Use token-based authentication (JWT or OAuth2) to handle user sessions and access control. When a user logs in, issue an authentication token (JWT) that can be sent with subsequent requests for authentication.
  3. Secure Token Storage: Store the authentication token securely on the device. Use AsyncStorage or a secure storage library to save the token locally.
  4. Authorization Middleware: Create middleware that checks the presence and validity of the token before allowing access to certain routes or APIs.
  5. Auto-Login and Token Refresh: Implement an auto-login mechanism to remember the user’s authentication status across app restarts. Consider using refresh tokens to obtain a new access token without requiring the user to log in again.
  6. Logout: Provide a logout mechanism that clears the stored token and navigates the user back to the login screen.
  7. Error Handling: Handle authentication errors gracefully and provide appropriate error messages to the user.
  8. Remember Me: If desired, allow users to choose a “Remember Me” option during login to extend their session duration.
  9. Password Reset: Implement a password reset mechanism that securely sends a reset link to the user’s registered email address.
  10. Social Authentication: Consider providing social authentication options (e.g., sign in with Google, Facebook) to enhance the user experience.
  11. Secure API Communication: Ensure that all API requests to your backend server use HTTPS and are protected from common security vulnerabilities like Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF).

16. What is a synthetic event in React Native?

In React Native, a synthetic event is a wrapper around the native event that is passed to event handlers in your components. It is a part of React’s event system and provides a consistent interface for handling events across different platforms (iOS and Android).

React Native abstracts the native event systems and provides a unified interface, so you don’t have to worry about differences between the two platforms when handling events.

When an event occurs (e.g., a button is pressed), React Native captures the native event and creates a synthetic event object that wraps the native event. This synthetic event is then passed to the event handler function you define in your component.

The synthetic event is similar to a regular browser event in web development, but it is normalized across platforms to ensure consistent behavior. This abstraction allows you to write event handlers in React Native using the same syntax, regardless of the platform.

Here’s a basic example of handling a button press using a synthetic event:

JSX
import React from 'react';
import { View, Button } from 'react-native';

const MyComponent = () => {
  const handleButtonPress = (event) => {
    console.log('Button pressed!', event);
  };

  return (
    <View>
      <Button title="Press Me" onPress={handleButtonPress} />
    </View>
  );
};

export default MyComponent;

In this example, the handleButtonPress function receives a synthetic event object as an argument when the button is pressed. You can use the event object to access information about the event, such as the event type, target, and other properties.

17. What is the difference between React Native and Native Script?

React Native and NativeScript are both frameworks for building cross-platform mobile applications, but they have different underlying philosophies and technical implementations.

React Native:

  • Developed by Facebook, React Native uses a single codebase to build applications for both iOS and Android platforms.
  • It uses JavaScript and React syntax to create UI components, which are then rendered natively.
  • React Native applications are written in JavaScript and utilize a bridge to interact with native components and APIs.
  • Components in React Native are built using React’s declarative approach, making it easier to reason about the UI.
  • Provides a rich ecosystem of community-maintained libraries and tools.

NativeScript:

  • Developed by Progress Software, NativeScript allows developers to build cross-platform applications using a single codebase.
  • NativeScript provides two options for creating applications: using Angular or Vue.js for the UI layer, or using plain JavaScript/TypeScript with XML for the UI.
  • The UI components in NativeScript are rendered natively using platform-specific APIs.
  • NativeScript supports direct access to native APIs without using a bridge, providing more control over platform-specific features.
  • Provides a high degree of code reuse between web and mobile applications.

Main Differences:

  1. UI Rendering Approach: React Native uses a bridge to render UI components natively, while NativeScript directly accesses native APIs for rendering.
  2. UI Framework: React Native uses React for building UI components, while NativeScript allows the use of Angular, Vue.js, or plain JavaScript/TypeScript for the UI layer.
  3. Community and Ecosystem: React Native has a larger community and a more extensive ecosystem of libraries and tools.
  4. Platform-specific Features: NativeScript allows direct access to platform-specific features, which can be beneficial for applications requiring extensive customization.

18. What’s the difference between ‘setState’ and ‘forceUpdate’ in React Native?

setStateforceUpdate
Is a method provided by React.ComponentIs a method provided by React.Component
Used to update component stateUsed to trigger a re-render of the component without modifying the state
Triggers a re-render of the componentBypasses the usual shouldComponentUpdate check and forces a re-render
Merges the provided state with the current oneDoes not use the state and causes a “pure” re-render, which may result in stale data if not handled
Asynchronous and batched updatesAsynchronous and batched updates (similar to setState)
Automatically triggers re-renderingShould be used with caution, as it can lead to performance issues and is not recommended in most cases

Usage of setState:

JSX
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.handleIncrement} />
      </View>
    );
  }
}

In this example, setState is used to update the count state, which triggers a re-render of the component and updates the displayed count value.

Usage of forceUpdate:

JSX
class MyComponent extends React.Component {
  handleForceUpdate = () => {
    this.forceUpdate();
  };

  render() {
    return (
      <View>
        <Text>Random Number: {Math.random()}</Text>
        <Button title="Force Update" onPress={this.handleForceUpdate} />
      </View>
    );
  }
}

In this example, forceUpdate is used to trigger a re-render of the component without modifying the state. The displayed “Random Number” value will be updated with a new random number upon pressing the button.

19. How would you optimize a React Native application for better performance?

Optimizing a React Native application for better performance involves various techniques and best practices. Here are some tips to consider:

  1. Virtualized Lists: Use FlatList or SectionList for long lists to implement virtualization, rendering only the visible items on the screen.
  2. Minimize Renders: Prevent unnecessary re-renders using React.memo, shouldComponentUpdate, or PureComponent.
  3. Use Native Components: Utilize native components for performance-critical parts of your app, especially for animations and complex UI.
  4. Optimize Images: Use compressed and properly sized images. Consider using WebP format for better compression.
  5. Code Splitting: Use dynamic imports and code splitting to load components and resources only when needed.
  6. Avoid Inline Functions: Refrain from using inline functions as props to prevent unnecessary function re-creation.
  7. Reduce the Use of forceUpdate: Minimize the use of forceUpdate as it bypasses the usual render checks.
  8. Optimize Network Requests: Use caching, compression, and minification to optimize network requests.
  9. Use Memoization: Use memoization techniques like useMemo or useCallback to avoid re-computation of expensive calculations.
  10. Bundle Splitting: Split your JavaScript bundle into smaller chunks to load only the required code.
  11. Profile Performance: Use profiling tools like Systrace and React DevTools to identify performance bottlenecks.
  12. Remove Unused Code: Regularly audit and remove unused code, dependencies, and assets.
  13. Use Native Modules: Offload CPU-intensive tasks to native modules to leverage the platform’s performance.
  14. Avoid console.log: Remove or disable console.log statements in production builds to avoid unnecessary logging overhead.
  15. Memory Management: Ensure proper cleanup of event listeners, timers, and subscriptions to prevent memory leaks.
  16. Offline Support: Implement offline support using caching and background synchronization.
  17. Keep UI Simple: Avoid overcomplicating the UI, and prioritize simplicity and clarity.
  18. Testing and Profiling: Regularly test and profile your app on different devices to identify performance issues.
  19. Use Production Builds: Always use production builds for testing and deployment to get optimized performance.

20. What’s the role of a ‘packager’ in React Native?

The packager (formerly known as the “Metro Bundler”) in React Native is a critical tool used in the development process. Its main role is to bundle and package JavaScript code and other assets required by the application.

When you run your React Native app, the packager starts a development server that listens for changes in your code. When you make changes to your JavaScript code or assets (e.g., images), the packager bundles everything together into a single JavaScript bundle.

The packager performs several tasks:

  1. Transpilation: The packager uses Babel to transpile modern JavaScript (ES6+ syntax) into a compatible version of JavaScript that can run on older devices.
  2. Module Resolution: It resolves import statements, ensuring that the correct modules are included in the bundle.
  3. Dependency Management: The packager handles dependency resolution, ensuring that all required packages are included in the bundle.
  4. Hot Reloading: During development, the packager enables hot reloading, allowing you to see immediate changes in your app as you edit the code without needing to restart the app.
  5. Asset Management: The packager processes and bundles all the required assets (images, fonts, etc.) and provides URLs for them to be used in the app.
  6. Minification: In production builds, the packager minifies and optimizes the JavaScript code to reduce its size and improve performance.
  7. Source Maps: In development mode, the packager generates source maps, which allow you to debug the original source code from the bundled code.

21. Can you explain how React Native uses JavaScriptCore and what it is?

JavaScriptCore is the JavaScript engine used by React Native to execute JavaScript code in the mobile application. It is an open-source JavaScript engine developed by Apple and is the same engine used in the Safari browser on iOS and macOS.

When you build a React Native application, your JavaScript code is bundled into a single file, which is then loaded into the JavaScriptCore engine during the app’s runtime. The engine interprets and executes the JavaScript code, making it possible for your app to run on both Android and iOS platforms.

React Native relies on JavaScriptCore for the following:

  1. Interpreting JavaScript Code: JavaScriptCore reads and interprets your JavaScript code, allowing it to execute and control the behavior of your app.
  2. Handling Asynchronous Operations: JavaScriptCore enables the use of asynchronous functions and handles events, timers, and other asynchronous operations.
  3. Bridge Communication: The JavaScriptCore engine plays a critical role in the communication between the JavaScript code and native modules, facilitating the React Native bridge.
  4. Performance Optimization: JavaScriptCore is designed for efficient execution of JavaScript code, which is crucial for maintaining app performance.
  5. Integration with Native Code: JavaScriptCore allows React Native to integrate seamlessly with native components and APIs.

22. How do you handle backward compatibility in React Native?

Handling backward compatibility in React Native involves supporting older versions of the app while introducing new features and updates for the latest versions. Here are some strategies for managing backward compatibility:

  1. Version Checks: Conditionally render components or features based on the app version using platform-specific APIs like Platform.Version or libraries like react-native-device-info.
  2. Polyfills: Use polyfills to provide compatibility for features not available in older versions of React Native or JavaScript. Libraries like core-js can help with this.
  3. Conditional Imports: Use conditional imports to load different code based on the React Native version. You can utilize the react-native global object for this purpose.
JSX
import { Platform, requireNativeComponent } from 'react-native';

let MyComponent;

if (Platform.OS === 'android') {
  MyComponent = requireNativeComponent('MyComponent');
} else {
  MyComponent = require('./MyComponentFallback');
}
  1. Gradual Rollouts: Gradually roll out updates to specific user groups to ensure stability and identify potential issues before releasing to all users.
  2. Feature Flags: Use feature flags to enable or disable specific features based on the app version or user preferences. Libraries like react-native-feature-flag can help with this.
  3. API Compatibility Layers: Create compatibility layers for APIs that have changed between different versions of React Native. This allows you to abstract away version-specific differences.
  4. Testing on Older Devices: Test your app on older devices and emulators to ensure it functions correctly on various versions of React Native.
  5. Fallback Components: Provide fallback components or UI elements for features that are not available on older versions.

23. How do you link a library in React Native?

To link a library in React Native, you need to follow these steps:

  1. Install the Library: Use npm or yarn to install the library package.
JSX
   # Using npm
   npm install <library-name>

   # Using yarn
   yarn add <library-name>
  1. Auto-Linking (React Native 0.60 and above): For React Native version 0.60 and above, most libraries support auto-linking, and you don’t need to perform manual linking. The package should be automatically linked to your project.
  2. Manual Linking (React Native below 0.60): If the library you’re using doesn’t support auto-linking (for React Native versions below 0.60), you need to link it manually. Use the following command:
JSX
   # For auto-linking
   react-native link <library-name>

This command will link the library’s native code to your project for both iOS and Android platforms.

  1. iOS Specific Steps: For some libraries, additional steps may be required for iOS. This can include adding configuration files, updating the Info.plist, or modifying the Xcode project. Always follow the library’s documentation for specific instructions.
  2. Android Specific Steps: Similarly, for Android, some libraries may require additional configurations. This can include modifying the android/build.gradle file or the MainApplication.java file. Check the library’s documentation for specific instructions.
  3. Rebuild the App: After linking the library, rebuild your app to ensure that the changes take effect.
JSX
   # For iOS
   npx react-native run-ios

   # For Android
   npx react-native run-android

24. What’s the process to deploy a React Native App on the App Store and Google Play Store?

Deploying a React Native app to the App Store (for iOS) and Google Play Store (for Android) involves several steps and configurations. Here is an overview of the process for each platform:

Deploying to the App Store (iOS):

  1. Generate Certificates: Create and download distribution certificates and provisioning profiles from the Apple Developer portal.
  2. Set App Metadata: Configure app metadata, such as the app’s name, description, icons, and screenshots, in App Store Connect.
  3. Configure Xcode Project: Set up the Xcode project for distribution, including code signing and release configuration.
  4. Create an Archive: Build an archive of your app using Xcode.
  5. Upload to App Store Connect: Use Xcode’s Organizer to upload the archive to App Store Connect.
  6. App Review: After uploading the app, it goes through the App Store review process. Once approved, it will be available on the App Store.

Deploying to Google Play Store (Android):

  1. Create a Keystore: Generate a Keystore file to sign your app. This is required for publishing on Google Play.
  2. Configure App Metadata: Set up the app’s metadata, including title, description, screenshots, and icons, on the Google Play Console.
  3. Build the APK or AAB: Generate a release build of your app either as an APK (Android Package) or an AAB (Android App Bundle).
  4. Upload to Google Play Console: Use the Google Play Console to upload the APK or AAB for distribution.
  5. App Review: Unlike the App Store, Google Play Store doesn’t have a manual review process. Your app will be published on the Play Store once it’s uploaded.

25. Can you describe the use of ‘propTypes’ in React Native?

propTypes is a feature in React (including React Native) that allows you to specify the types of props that a component should receive. It is a mechanism for documenting and validating the expected props of a component.

With propTypes, you can define the types and, optionally, additional constraints (e.g., required, default values) for the props that a component expects to receive. React will automatically check the incoming props against the defined propTypes during development and provide warnings if the types don’t match.

Here’s an example of using propTypes in a React Native component:

JSX
import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Age: {age}</Text>
    </View>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

In this example, we define propTypes for the name and age props using PropTypes.string and PropTypes.number, respectively. We also specify that both props are required (isRequired) by adding it to the definition.

Using propTypes helps in the following ways:

  1. Documentation: propTypes serve as a form of documentation for developers using or maintaining your components, making it clear what props are expected and their types.
  2. Debugging: React provides helpful warnings during development if the props don’t match the specified propTypes, which can catch potential bugs early.
  3. Type Checking: It improves the reliability of your code by ensuring that the props received by a component adhere to the specified types.

Advanced Questions

1. How does React Native interact with native components?

React Native uses a bridge to communicate between JavaScript code and native code. Native components are written in Java or Objective-C/Swift for Android and iOS, respectively. The communication happens asynchronously through the bridge.

Example: Integrating a native button component in React Native.

JavaScript
// JavaScript code
import React from 'react';
import { View, NativeModules, requireNativeComponent } from 'react-native';

const NativeButton = requireNativeComponent('CustomButton');

const App = () => {
  const onPress = () => {
    NativeModules.CustomModule.showNativeToast('Hello from React Native!');
  };

  return (
    <View>
      <NativeButton onPress={onPress} />
    </View>
  );
};

export default App;
Java
// Java code for Android CustomButton
package com.yourpackage;

import android.content.Context;
import android.view.View;
import androidx.annotation.NonNull;

public class CustomButton extends View {
    public CustomButton(@NonNull Context context) {
        super(context);
    }

    // Custom implementation of the button
    // ...
}
Swift
// Swift code for iOS CustomButton
import UIKit

@objc(CustomButton)
class CustomButton: UIView {
    // Custom implementation of the button
    // ...
}

2. What strategies would you use to optimize React Native performance?

Some strategies to optimize React Native performance include:

  1. Use FlatList: Replace ScrollView with FlatList for efficient rendering of long lists.
  2. Native Modules: Implement performance-critical functionalities in native code and use Native Modules to communicate with JavaScript.
  3. Use shouldComponentUpdate/PureComponents: Prevent unnecessary re-renders by using shouldComponentUpdate or React.PureComponent.
  4. Async Rendering: Use InteractionManager to schedule rendering during idle time to keep the UI responsive.
  5. Minimize JS Bundle Size: Employ code splitting, dynamic imports, and tree-shaking to reduce the bundle size.
  6. Image Optimization: Use compressed and appropriately sized images to minimize load times.
  7. Memoization: Use React.memo to memoize components and avoid re-rendering when props don’t change.
  8. Use Hermes: For Android, enable Hermes JavaScript engine for faster startup and smaller app size.

3. How do you handle deep linking in a React Native application?

Deep linking allows users to open specific screens within the app using URLs. React Navigation library can be used to handle deep linking.

Example:

JavaScript
// Define navigation configuration
// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();

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

export default App;
JavaScript
// HomeScreen.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();

  const navigateToDetail = () => {
    // Deep link to the Detail screen
    navigation.navigate('Detail', { itemId: 123 });
  };

  return (
    <View>
      <Text>Home Screen</Text>
      <TouchableOpacity onPress={navigateToDetail}>
        <Text>Go to Detail</Text>
      </TouchableOpacity>
    </View>
  );
};

export default HomeScreen;
JavaScript
// DetailScreen.js
import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailScreen = () => {
  const route = useRoute();
  const itemId = route.params?.itemId || 'No item';

  return (
    <View>
      <Text>Detail Screen</Text>
      <Text>Item ID: {itemId}</Text>
    </View>
  );
};

export default DetailScreen;

4. What are the differences in handling gestures in Android and iOS in React Native?

React Native provides a unified way of handling gestures for both Android and iOS. However, there might be some platform-specific nuances for certain gestures, like handling back gestures on Android.

Example:

JavaScript
import React from 'react';
import { View, TouchableOpacity, PanResponder, Animated } from 'react-native';

const App = () => {
  const pan = React.useRef(new Animated.ValueXY()).current;

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event(
      [null, { dx: pan.x, dy: pan.y }],
      { useNativeDriver: false }
    ),
    onPanResponderRelease: () => {
      // Handle gesture release
    },
  });

  return (
    <View>
      <Animated.View
        {...panResponder.panHandlers}
        style={[pan.getLayout(), { width: 100, height: 100, backgroundColor: 'red' }]}
      />
    </View>
  );
};

export default App;

The example above shows a draggable red box using the PanResponder API, which works the same way on both Android and iOS.

5. How does the layout system work in React Native?

In React Native, the layout system uses Flexbox to manage the positioning and sizing of components within a container. Flexbox allows components to dynamically adjust their layout based on the container’s dimensions and screen orientation.

Example:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
});

export default App;

In this example, the three colored boxes are aligned in a row with equal spacing due to the use of Flexbox.

6. How do you handle memory leaks in React Native?

Memory leaks in React Native can occur when references to components or resources are not properly cleaned up. To handle memory leaks, you should unsubscribe from subscriptions, remove event listeners, and clear timers when components are unmounted.

Example:

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

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

  useEffect(() => {
    const fetchData = async () => {
      // Simulate fetching data from an API
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // Clean up the subscription when the component unmounts
    return () => {
      setData([]); // Clear the data to prevent rendering after unmount
    };
  }, []);

  return (
    <View>
      {data.map((item, index) => (
        <Text key={index}>{item.name}</Text>
      ))}
    </View>
  );
};

export default MemoryLeakExample;

In this example, we clear the data state when the component unmounts, preventing any potential memory leaks when the component is no longer in use.

7. How would you ensure data consistency across multiple devices in React Native?

To ensure data consistency across multiple devices in React Native, you can use various techniques, such as:

  1. Real-time Database: Use real-time databases like Firebase Realtime Database or Cloud Firestore, which automatically synchronize data across devices.
  2. WebSockets: Implement WebSocket connections to enable real-time data updates and bidirectional communication between the app and the server.
  3. Redux with Middleware: Use Redux middleware like Redux-Saga or Redux-Thunk to manage asynchronous data flow and handle data synchronization across devices.
  4. Conflict Resolution: Implement conflict resolution strategies, such as “last write wins” or merging changes, to handle simultaneous updates from different devices.
  5. Offline Data Handling: Store data locally on the device and sync it with the server when the device comes online to ensure data consistency during intermittent connectivity.
  6. Versioning and Migration: Handle data schema changes gracefully by maintaining versioning and migration strategies to keep the data consistent during updates.

8. Can you explain how to use GraphQL in a React Native application?

GraphQL is a query language for APIs that allows clients to request only the data they need. To use GraphQL in a React Native application, you need to set up a GraphQL server and use a GraphQL client library, such as Apollo Client or Relay.

Example (using Apollo Client):

JavaScript
// Install required packages
// npm install @apollo/client graphql

// client.js
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://api.example.com/graphql', // URL of your GraphQL server
});

const authLink = setContext(async (_, { headers }) => {
  // Add any authorization headers if needed
  return {
    headers: {
      ...headers,
      Authorization: 'Bearer YOUR_ACCESS_TOKEN',
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export default client;
JavaScript
// App.js
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from './client';
import HomeScreen from './HomeScreen';

const App = () => {
  return (
    <ApolloProvider client={client}>
      <HomeScreen />
    </ApolloProvider>
  );
};

export default App;
JavaScript
// HomeScreen.js
import React from 'react';
import { View, Text } from 'react-native';
import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query {
    getData {
      id
      name
    }
  }
`;

const HomeScreen = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error</Text>;

  return (
    <View>
      {data.getData.map((item) => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
};

export default HomeScreen;

In this example, we set up an Apollo Client and use it to query data from the GraphQL server in the HomeScreen component.

9. What is the difference between Flow and PropTypes, and when would you use one over the other?

Flow and PropTypes are both used for type-checking in React applications.

Flow:

  • Flow is a static type-checker developed by Facebook that can be used with JavaScript.
  • It requires adding type annotations to variables, functions, and components.
  • Flow performs type-checking at build time and does not add any runtime overhead.

PropTypes:

  • PropTypes is a runtime type-checking library provided by React for checking the types of props passed to components.
  • PropTypes are defined as static properties on components and are checked during development using the prop-types package.

Example using PropTypes:

JavaScript
// Install required package
// npm install prop-types

import React from 'react';
import PropTypes from 'prop-types';

const Greeting = ({ name }) => {
  return <div>Hello, {name}</div>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

Example using Flow:

JavaScript
// @flow

import React from 'react';

type Props = {
  name: string,
};

const Greeting = ({ name }: Props) => {
  return <div>Hello, {name}</div>;
};

export default Greeting;

You would use Flow when you want static type-checking at build time with more comprehensive type annotations. PropTypes are simpler to use but provide runtime type-checking and are suitable for smaller projects or when using class components. For larger projects with complex type requirements, Flow might be a better choice.

10. How can you embed a React Native view in a native application?

To embed a React Native view in a native application, you need to follow these steps:

  1. Set up React Native in your native application by integrating the React Native module or framework.
  2. Create a new React Native component and expose it to the native module system.
  3. In the native application code, instantiate and add the React Native view to the native UI.

Example:

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

const MyReactNativeView = () => {
  return (
    <View>
      <Text>Hello from React Native!</Text>
    </View>
  );
};

export default MyReactNativeView;
Swift
// iOS implementation (Swift)
import UIKit
import React
import ReactNative

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    addReactNativeView()
  }

  private func addReactNativeView() {
    let rootView = RCTRootView(
      bundleURL: URL(string: "

http://localhost:8081/index.bundle?platform=ios"),
      moduleName: "MyReactNativeView",
      initialProperties: nil,
      launchOptions: nil
    )
    rootView?.frame = CGRect(x: 0, y: 0, width: 300, height: 100) // Set desired size
    view.addSubview(rootView!)
  }
}
Java
// Android implementation (Java)
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeView", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

In this example, we have a simple MyReactNativeView component, and we add it to both an iOS and an Android native application using the appropriate integration code.

11. How to use Websockets in React Native?

Websockets allow real-time bidirectional communication between clients and servers. In React Native, you can use the WebSocket API to implement Websockets.

Example:

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

const App = () => {
  const [socket, setSocket] = useState(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Create a new WebSocket connection
    const newSocket = new WebSocket('ws://example.com/socket');

    // Set up event listeners for the WebSocket
    newSocket.onopen = () => {
      console.log('WebSocket connected');
    };

    newSocket.onmessage = (event) => {
      setMessage(event.data);
    };

    newSocket.onclose = () => {
      console.log('WebSocket disconnected');
    };

    setSocket(newSocket);

    // Clean up the WebSocket on unmount
    return () => {
      newSocket.close();
    };
  }, []);

  const sendMessage = () => {
    if (socket) {
      socket.send('Hello from React Native!');
    }
  };

  return (
    <View>
      <Text>{message}</Text>
      <Button title="Send Message" onPress={sendMessage} />
    </View>
  );
};

export default App;

In this example, we set up a WebSocket connection to a server and send a message from the client to the server when the button is pressed. The received message is displayed on the screen.

12. What are the steps to integrate Redux middleware in a React Native application?

Redux middleware allows you to extend the behavior of Redux dispatch function. Common use cases include logging, handling asynchronous actions, and more. Here are the steps to integrate Redux middleware in a React Native application:

  1. Install required packages: redux, react-redux, and any additional middleware you need, like redux-thunk or redux-saga.
  2. Create a Redux store with the middleware applied using applyMiddleware.
  3. Wrap your root component with Provider from react-redux.

Example with redux-thunk:

JavaScript
// Install required packages
// npm install redux react-redux redux-thunk

// store.js
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; // Middleware for handling async actions
import rootReducer from './reducers'; // Your combined reducers

const store = createStore(rootReducer, applyMiddleware(thunk));

// Wrap the root component with Provider
const App = () => (
  <Provider store={store}>
    {/* Your app components */}
  </Provider>
);

export default App;

13. How does React Native handle image optimization for different screen densities?

React Native automatically handles image optimization for different screen densities by providing different versions of the same image at build time. You can use Image component with specific image names and React Native will load the appropriate one based on the device’s screen density.

Example:

JavaScript
project
├── assets
│   ├── img.png
│   ├── img@2x.png
│   └── img@3x.png
├── App.js
└── package.json
JavaScript
// App.js
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/img.png')} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;

In this example, we have three versions of the same image with different resolutions. React Native will automatically choose the appropriate one based on the device’s screen density.

14. How can you handle offline actions in a React Native application using Redux?

To handle offline actions in a React Native application using Redux, you can use middleware like redux-offline or redux-persist. These libraries help persist the store data locally and handle rehydration on app restart.

Example using redux-offline:

JavaScript
// Install required packages
// npm install redux react-redux redux-offline

// store.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults'; // Or your custom config
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(
  combineReducers({ ...rootReducer, offline }),
  composeWithDevTools(
    applyMiddleware(
      // Other middleware (thunk, logger, etc.) here
    ),
  ),
);

export default store;
JavaScript
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MainComponent from './MainComponent';

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

export default App;

In this example, we set up the Redux store using redux-offline middleware, which enables handling of offline actions and data persistence.

15. Explain how to use local notifications in React Native.

Local notifications in React Native can be implemented using the react-native-push-notification library. This library allows you to schedule, display, and handle local notifications within the app.

Example:

JavaScript
// Install required packages
// npm install react-native-push-notification

// index.js (for Android)
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import PushNotification from 'react-native-push-notification';

// Configure notification handling
PushNotification.configure({
  onNotification: function (notification) {
    console.log('Local Notification:', notification);
  },
});

AppRegistry.registerComponent(appName, () => App);
JavaScript
// App.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import PushNotification from 'react-native-push-notification';

const App = () => {
  const showLocalNotification = () => {
    PushNotification.localNotification({
      channelId: 'channel-id', // Android only
      title: 'My Notification',
      message: 'This is a local notification!',
    });
  };

  return (
    <View>
      <Text>Hello, React Native!</Text>
      <Button title="Show Notification" onPress={showLocalNotification} />
    </View>
  );
};

export default App;

In this example, we show a local notification when the button is pressed using react-native-push-notification library.

16. How do you handle and debug unhandled exceptions in a React Native application?

To handle and debug unhandled exceptions in a React Native application, you can use the ErrorBoundary component, which catches errors in its children components and allows you to handle them gracefully.

Example:

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

class ErrorBoundary extends Component {
  state = {
    hasError: false,
    errorMessage: '',
  };

  static getDerivedStateFromError(error) {
    return { hasError: true, errorMessage: error.message };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error or report it to a service
    console.error('Error:', error);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View>
          <Text>Oops, something went wrong!</Text>
          <Text>{this.state.errorMessage}</Text>
        </View>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;
JavaScript
// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MainComponent from './MainComponent';

const App = () => (
  <ErrorBoundary>
    <MainComponent />
  </ErrorBoundary>
);

export default App;

In this example, we wrap the main component with ErrorBoundary, which will catch and handle any unhandled exceptions thrown by its children components.

17. What are some of the limitations of using React Native and how can you work around them?

Some limitations of using React Native include:

  • Performance: React Native may not perform as well as native development, especially for complex and resource-intensive applications. To improve performance, use native modules for critical functionalities and optimize code and assets.
  • Access to Native APIs: Sometimes, React Native may not provide access to all native APIs. You can bridge the gap by writing custom native modules.
  • Third-Party Library Compatibility: Not all native libraries have direct React Native support. You may need to write wrappers or use community-maintained libraries to achieve the functionality.
  • Debugging: Debugging React Native applications can be challenging. Use tools like React Native Debugger and native debugging tools for iOS and Android.
  • Large Binary Size: React Native apps may have larger binary sizes compared to native apps. Use app thinning and optimize assets to reduce the size.
  • Hot Reload Stability: Hot Reload may not always work seamlessly and can lead to unexpected behavior. In such cases, use regular reload or refresh.
  • UI Consistency: Achieving pixel-perfect UI consistency across platforms may require extra effort due to differences in UI rendering.

18. What strategies would you use to reduce the APK size in a React Native application?

To reduce the APK size in a React Native application, you can follow these strategies:

  1. Minify and Optimize: Enable minification, dead code elimination, and code obfuscation during the build process to reduce the size of JavaScript bundles.
  2. Image Optimization: Compress images and use different versions for different screen densities to reduce image size.
  3. Asset Bundling: Use asset bundling to create multiple bundles for different sections of the app, loading only what’s needed for each screen.
  4. App Thinning (iOS): For iOS, use app thinning to deliver only the necessary resources to the device.
  5. React Native Community Packages: Review the packages used in your app and consider using smaller, more specialized packages from the React Native community.
  6. Remove Unused Dependencies: Remove any unused dependencies from your package.json.
  7. Dynamic Imports: Use dynamic imports to load resources only when needed, reducing the initial bundle size.

Example using asset bundling:

JavaScript
// Modify metro.config.js or metro.config.json
module.exports = {
  resolver: {
    assetExts: ['png', 'jpg', 'jpeg', 'gif'], // Include only specific image types
  },
  transformer: {
    assetPlugins: ['expo-asset/tools/hashAssetFiles'], // Use Expo's asset hashing plugin for optimization
  },
};

19. Explain how to use Threading, Handler, or AsyncTask in React Native.

In React Native, JavaScript runs on a single thread, and heavy computations or long-running tasks can block the UI and lead to an unresponsive app. To perform background tasks, you can use native modules or libraries that handle threading.

Example using a native module for Android:

Java
// MyTaskModule.java
package com.example;

import android.os.AsyncTask;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyTaskModule extends ReactContextBaseJavaModule {
  private static final String MODULE_NAME = "MyTaskModule";

  public MyTaskModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return MODULE_NAME;
  }

  @ReactMethod
  public void doBackgroundTask() {
    new BackgroundTask().execute();
  }

  private static class BackgroundTask extends AsyncTask<Void, Void, Void> {
    @Override
    protected Void doInBackground(Void... params) {
      // Perform background computation here
      return null;
    }
  }
}
JavaScript
// MyTaskModule.js
import { NativeModules } from 'react-native';

const { MyTaskModule } = NativeModules;

MyTaskModule.doBackgroundTask();

In this example, we create a native module for Android that uses an AsyncTask to perform background computations. The JavaScript code calls the native module to start the background task.

Please note that the approach may vary for iOS or if you use specific threading libraries like react-native-workers.

20. How do you ensure quality in the design and coding process of a React Native application?

To ensure quality in the design and coding process of a React Native application, you can follow these best practices:

  1. Code Reviews: Conduct code reviews to catch bugs, improve code quality, and ensure adherence to coding standards.
  2. Automated Testing: Write unit tests, integration tests, and end-to-end tests to ensure that the app works as expected and regressions are caught early.
  3. Linting: Use linting tools like ESLint or Prettier to enforce code style consistency and identify potential issues.
  4. Continuous Integration (CI): Set up CI/CD pipelines to automatically build, test, and deploy the app when code changes are pushed.
  5. Performance Monitoring: Use performance monitoring tools to identify bottlenecks and improve app performance.
  6. Accessibility: Ensure that the app is accessible to users with disabilities by following accessibility guidelines.

Example using Jest for testing:

JavaScript
// Install required packages
// npm install jest react-test-renderer --save-dev

// sum.js
function sum(a, b) {
return a + b;
}
export default sum

21. What are the considerations and steps to migrate a large web application to React Native?

Migrating a large web application to React Native requires careful planning and consideration of various factors. Some considerations and steps for the migration are:

  1. Codebase Analysis: Analyze the existing codebase to identify reusable components and business logic that can be shared between the web and mobile platforms.
  2. UI/UX Adaptation: Adapt the UI/UX of the web application to fit the mobile design and user interaction patterns.
  3. API and Data Handling: Modify API calls and data handling to accommodate the mobile platform and consider offline capabilities.
  4. Platform-Specific Features: Identify and implement platform-specific features that enhance the mobile app experience.
  5. Testing: Set up testing infrastructure to ensure the migrated app works as expected on different devices.
  6. Performance Optimization: Optimize the app for mobile performance, considering factors like memory usage and network connectivity.
  7. Gradual Migration: Consider a gradual migration approach, starting with individual screens or modules and incrementally expanding the mobile app.

22. Explain how to build a typeahead search in React Native.

A typeahead search in React Native involves providing suggestions as the user types into the search input field. You can achieve this by using the TextInput component and filtering the search results based on the input.

Example:

JavaScript
import React, { useState } from 'react';
import { View, TextInput, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';

const TypeaheadSearch = () => {
  const [searchText, setSearchText] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const data = [
    'Apple', 'Banana', 'Cherry', 'Grapes', 'Kiwi', 'Orange', 'Pear', 'Strawberry', 'Watermelon'
  ];

  const handleSearch = (text) => {
    setSearchText(text);
    const filteredResults = data.filter(item =>
      item.toLowerCase().includes(text.toLowerCase())
    );
    setSearchResults(filteredResults);
  };

  const renderResultItem = ({ item }) => (
    <TouchableOpacity style={styles.item} onPress={() => handleSelectItem(item)}>
      <Text>{item}</Text>
    </TouchableOpacity>
  );

  const handleSelectItem = (item) => {
    // Handle the selected item
    console.log('Selected:', item);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type to search..."
        value={searchText}
        onChangeText={handleSearch}
      />
      <FlatList
        data={searchResults}
        renderItem={renderResultItem}
        keyExtractor={(item) => item}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
});

export default TypeaheadSearch;

In this example, we create a TypeaheadSearch component that uses TextInput to handle user input and FlatList to display search results as the user types.

23. How do you handle large data sets or lists in React Native?

Handling large data sets or lists in React Native involves rendering only the visible items to optimize performance. You can achieve this using the FlatList component, which is designed to efficiently render large lists.

Example:

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

const LargeDataList = () => {
  const data = Array.from({ length: 1000 }, (_, index) => ({ id: index, name: `Item ${index}` }));

  const renderItem = ({ item }) => (
    <View style={{ padding: 10 }}>
      <Text>{item.name}</Text>
    </View>
  );

  return (
    <View>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

export default LargeDataList;

In this example, we create a LargeDataList component that renders 1000 items using FlatList. The FlatList efficiently handles rendering only the visible items, which ensures smooth performance even with a large data set.

24. How can you synchronize React Native with the device’s native codebase?

React Native allows you to bridge between JavaScript and the native codebase using native modules.

Example (Android):

  1. Create a Java class that extends ReactContextBaseJavaModule:
Java
// MyNativeModule.java
package com.example;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {
  public MyNativeModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MyNativeModule";
  }

  @ReactMethod
  public void doSomething(String message) {
    // Native implementation
    // ...
  }
}
  1. Create a Java package for the module:
Java
// MyPackage.java
package com.example;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new MyNativeModule(reactContext));
    return modules;
  }
}
  1. Register the package in the MainApplication.java file:
Java
// MainApplication.java
package com.example;

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }



    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyPackage() // Add the custom package here
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}
  1. Now you can use the native module from JavaScript:
JavaScript
// MyComponent.js
import { NativeModules } from 'react-native';

const MyNativeModule = NativeModules.MyNativeModule;

const MyComponent = () => {
  const doSomething = () => {
    MyNativeModule.doSomething('Hello from React Native!');
  };

  // ...
};

export default MyComponent;

In this example, we create a custom native module for Android and use it in a React Native component.

25. Explain the process to include a third-party React Native component in your project.

To include a third-party React Native component in your project, you typically follow these steps:

  1. Install the Package: Use a package manager like npm or yarn to install the desired package.

Example:

JavaScript
npm install react-native-vector-icons
  1. Link the Package (if required): Some packages need manual linking to the native project. React Native versions 0.60 and above support auto-linking, but for earlier versions, you may need to link manually.

For example, if you are using a package that requires manual linking, you can run:

JavaScript
react-native link
  1. Import and Use the Component: Now you can import and use the component in your code.

Example:

JavaScript
import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const MyComponent = () => {
  return (
    <View>
      <Icon name="rocket" size={30} color="#900" />
      <Text>Hello React Native!</Text>
    </View>
  );
};

export default MyComponent;

In this example, we install the react-native-vector-icons package, link it (if required), and then use the Icon component in our app.

MCQ Questions

1. What is React Native?

a) A framework for building native mobile apps using JavaScript
b) A programming language developed by Facebook
c) A web development framework
d) A database management system

Answer: a) A framework for building native mobile apps using JavaScript

2. Which programming language is primarily used for developing React Native apps?

a) Java
b) Python
c) JavaScript
d) C++

Answer: c) JavaScript

3. What is the purpose of JSX in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the state of components
d) To render components and UI elements

Answer: d) To render components and UI elements

4. React Native uses native components for rendering UI elements. True or False?

a) True
b) False

Answer: a) True

5. What is the equivalent of CSS in React Native?

a) JSX
b) HTML
c) XML
d) Flexbox

Answer: d) Flexbox

6. Which command is used to create a new React Native project?

a) create-react-native-app
b) react-native start
c) npm start
d) create-react-app

Answer: a) create-react-native-app

7. How can you add external libraries or packages to a React Native project?

a) Using npm or yarn
b) By manually downloading and adding the files
c) By modifying the React Native core code
d) By using the Expo CLI

Answer: a) Using npm or yarn

8. Which of the following platforms does React Native support?

a) iOS
b) Android
c) Web
d) All of the above

Answer: d) All of the above

9. What is the purpose of the “state” in React Native?

a) To store and manage data that can change over time
b) To define the structure and layout of components
c) To handle user input and interactions
d) To define the behavior of components

Answer: a) To store and manage data that can change over time

10. What is the purpose of “props” in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the state of components
d) To pass data from a parent component to a child component

Answer: d) To pass data from a parent component to a child component

11. Which of the following is NOT a core component in React Native?

a) View
b) Text
c) Image
d) Button

Answer: d) Button

12. What is the purpose of the “StyleSheet” component in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the state of components
d) To style the components and apply CSS-like properties

Answer: d) To style the components and apply CSS-like properties

13. Which command is used to run a React Native app on an Android device or emulator?

a) react-native run-android
b) react-native run-ios
c) npm start
d) expo start

Answer: a) react-native run-android

14. What is the purpose of the “Touchable” components in React Native ?

a) To handle user input and interactions
b) To define the structure and layout of components
c) To manage the state of components
d) To render text and images

Answer: a) To handle user input and interactions

15. Which of the following is a popular navigation library for React Native?

a) React Router
b) React Navigation
c) React Native Router Flux
d) React Native Navigation

Answer: b) React Navigation

16. What is the purpose of the “AsyncStorage” component in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To store and retrieve data asynchronously
d) To style the components and apply CSS-like properties

Answer: c) To store and retrieve data asynchronously

17. What is the purpose of the “ActivityIndicator” component in React Native?

a) To display a loading spinner or indicator
b) To handle user input and interactions
c) To manage the state of components
d) To render text and images

Answer: a) To display a loading spinner or indicator

18. Which of the following is a popular library for managing state in React Native?

a) Redux
b) MobX
c) Apollo Client
d) All of the above

Answer: d) All of the above

19. What is the purpose of the “FlatList” component in React Native?

a) To display a list of items with a fixed number of columns
b) To handle user input and interactions
c) To manage the state of components
d) To render a scrollable list of items efficiently

Answer: d) To render a scrollable list of items efficiently

20. Which of the following is NOT a way to optimize performance in React Native?

a) Using pure components
b) Memoization
c) Code splitting
d) Increasing the number of dimensions

Answer: d) Increasing the number of dimensions

21. What is the purpose of the “SafeAreaView” component in React Native?

a) To handle user input and interactions
b) To define the structure and layout of components
c) To render a scrollable view with safe area insets
d) To store and manage data that can change over time

Answer: c) To render a scrollable view with safe area insets

22. Which of the following is a popular library for handling forms in React Native?

a) React Form
b) Formik
c) React Native Forms
d) React Redux Form

Answer: b) Formik

23. What is the purpose of the “Modal” component in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the state of components
d) To display a modal or popup dialog

Answer: d) To display a modal or popup dialog

24. What is the purpose of the “Linking” component in React Native?

a) To define the structure and layout of components
b) To handle deep linking and URL navigation
c) To manage the state of components
d) To render text and images

Answer: b) To handle deep linking and URL navigation

25. Which command is used to run a React Native app on an iOS device or simulator?

a) react-native run-android
b) react-native run-ios
c) npm start
d) expo start

Answer: b) react-native run-ios

26. What is the purpose of the “TouchableOpacity” component in React Native?

a) To handle user input and interactions
b) To define the structure and layout of components
c) To manage the state of components
d) To render text and images

Answer: a) To handle user input and interactions

27. Which of the following is a popular library for handling navigation gestures in React Native?

a) React Router
b) React Navigation
c) React Native Gesture Handler
d) React Native Navigation

Answer: c) React Native Gesture Handler

28. What is the purpose of the “StatusBar” component in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the status of the app’s status bar
d) To render text and images

Answer: c) To manage the status of the app’s status bar

29. Which of the following is NOT a valid lifecycle method in React Native?

a) componentDidMount
b) componentWillUpdate
c) componentDidUpdate
d) componentWillMount

Answer: b) componentWillUpdate

30. What is the purpose of the “Dimensions” API in React Native?

a) To define the structure and layout of components
b) To handle user input and interactions
c) To manage the state of components
d) To retrieve information about the device’s screen dimensions

Answer: d) To retrieve information about the device’s screen dimensions

Deepak Vishwakarma

Founder

60 New React Hooks Interview Question

TOP 30 Reactive Programming Question

RELATED Articles

Software Engineer Home Depot Salary

Deepak Vishwakarma

Senior Principal Software Engineer Salary

Deepak Vishwakarma

Mastercard Software Engineer Salary

Deepak Vishwakarma

Optiver Software Engineer Salary

Deepak Vishwakarma

Capital One Senior Software Engineer Salary

Deepak Vishwakarma

Ford Software Engineer Salary

Deepak Vishwakarma

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

MUST READ
State Farm Software Engineer Salary
Software Engineer Home Depot Salary
Senior Principal Software Engineer Salary
Mastercard Software Engineer Salary
CATEGORIES

Blog

Web Story

Google Sheet Tutorials

Interview Questions and Answers

Tech News

FOLLOW US

 

 

 

 

NEWSLETTER

© 2024 Saintcoders • Designed by Coding Interview Pro

About US

Contact US

Disclaimer

Privacy policy

Terms and Conditions