React Native is one of the most popular mobile application development frameworks. Launched in 2015 by Facebook, React Native’s popularity has increased tremendously. It is one of the most demanded technologies today. Though it has many similarities with React.js, there are many differences in React Native development. In this article, we will list down fifty React Native questions with answers.

General React Native questions

1. What is React Native?

Ans: React Native is a JavaScript cross-platform framework used for building mobile applications. It is created by Facebook.

2. What is the difference between React Native and React.js?

Ans: Both of them are JavaScript frameworks but React Native is used to build cross-platform mobile applications while React.js is used to build web applications.

3. What are the benefits of using React Native?

Ans: Benefits of using React Native are:

• It is cross-platform.
• It offers optimal performance.
• It offers better code reusability.
• It offers hot and live reloading.
• It is cost-effective.

4. When should we use React Native?

Ans: React Native should be used when an application is not specific to a single OS, meaning, it is going to be used on Android as well as IOS. Moreover, if the development time is less and the client budget is low, React Native is a very good choice. 

5. In which language React Native applications are written?

Ans: Similar to React applications, React Native applications are written in JSX.

6. What is virtual DOM React Native?

Ans: Virtual DOM is the lightweight copy of Real DOM. Instead of directly interacting with real DOM, React Native first interacts with virtual DOM. This greatly increases the performance of the application

7. Do we need to learn HTML and CSS for React Native?

Ans: No, there is no need to learn HTML and CSS for React Native.

Questions related to components

8. What are the two ways of creating components in React Native?

Ans: The two ways of creating components in React Native are:

• By using classes
• By using functions

9. How to create a class component in React Native?

Ans: To create a class component in React Native, extend the class to “Component” that is imported from “react”.

10. Name the core components of React Native.

Ans: Core components of React Native are:

• View
• Image
• Text
• TextInput
• ScrollView

11. What is equivalent to <input type=”text”> in React Native?

Ans: The equivalent to <input type=”text”> in React Native is <TextInput>.

12. Observe the following code.

<View>

      <Text>Center this text!</Text>

</View>

Edit this code to add styles for centering the <Text> horizontally as well as vertically.

Ans:     <View style={{

<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text>Center this text!</Text>
</View>

13. Name the equivalent of <div> in React Native.

Ans: React Native has two equivalents of <div>.

<View>

<ScrollView>

14. In React, we have the onChange() method to handle the text input. How can we handle the same in React Native?

Ans: React Native has a similar method named onChangeText() to handle the inputs.

15. What is ListView?

Ans: ListView is a React Native component used to create vertical scrollable lists. 

16. Why use FlatList over ScrollView?

Ans: Data is loaded immediately in a ScrollView and it is stored in RAM. When the data is huge, it will occupy a large amount of RAM thus causing performance issues. FlatList, on the other hand, loads on 10 items on the screen, and as the user scrolls, it keeps on loading the next items. This greatly increases the performance.

17. Suppose there is a list with 1000 items. Can we use ScrollView? Is it worth using it on such a list? Justify your answer.

Ans: Yes, we can use ScrollView on such a list but using ScrollView on such a huge list is not a good decision because it will store all the one thousand items in the RAM and it will cause many performance issues. Instead of ScrollView, use FlatList.

18. How to improve the performance of FlatList and SectionList?

Ans: To improve the performance of FlatList and SectionList, do not make any calculation in their header or row components. Moreover, make them really simple and use pure components for them.

19. How can we load web content in React Native?

Ans: We can load web content in React Native using the WebView component.

20. Differentiate between Touchable and Pressable components.

Ans: The Touchable component responds every time its child component is touched while the Pressable component is used to detect the press interactions on its child components.

Questions related to state and props

21. Name the two types of data that control a component in React Native.

Ans: The two types of data that control a component are state and props.

22. Explain state.

Ans:  The state is the information that represents the current situation of a component. It is basically a plain JavaScript object that controls the behavior of a component.

23. How to update state in class components?

Ans: To update state, use the in-buily setState() method.

24. How can we use the setState() method in functional components in React Native?

Ans: No, we cannot use the setState() method in functional components because they are only supported in classes.

25. What are props?

Ans: Props are the values passed from a parent component to a child component. These are immutable values. 

26. What is prop drilling?

Ans: Prop drilling is the passing of props from one component down to the nested component. For example, the passing of props from grandparent to parent and then to child component is known as prop drilling.

27. How to avoid prop drilling?

Ans: Prop drilling can be avoided by using:

• Context API
• Higher-Order Components (HOC)
• Render props

28. Explain render props.

Ans: Render props is a technique in which a function is passed as a prop from the parent component to the child component.

29. Suppose we have a React Native application with moderate state management. What is the best way to manage the state in such an application without using any third-party library?

Ans: The best way of managing the state in such an application is by using the React Context API. 

30. Is it possible to use state in functional components?

Ans: Yes, it is possible to use state in functional components with the help of react hooks.

31. What are react hooks?

Ans: React hooks are in-built JavaScript functions that let us use class component features such as the state in functional components. 

32. Explain the working of the useState() hook.

Ans: The useState() hook is used to create state in functional components. Using this hook, we can declare a state and a function to update it. We can also initialize the state using the useState() hook.

33. Which hook is used for dealing with side effects?

Ans: The useEffect() is used for dealing with side effects.

34. What is redux?

Ans: Redux is a JavaScript library that is used with React.js and React Native for managing the global state of the application.

Others

35. Name the types of thread in React Native.

Ans: Following are the types of threads in React Native:

• UI thread
• JS thread
• Native modules thread
• Render thread

36. What are the “three parts of React Native”?

Ans: The three parts of React Native are:

• Native side
• JS side
• Bridge

37. Differentiate between hot and live reloading.

Ans: In live reloading, the entire application is reloaded when a file is changed while in hot reloading, only the file(s) that is changed is reloaded without losing the state. 

38. What is async storage?

Ans: The async storage is the equivalent of the browser’s local storage. It is an asynchronous, encrypted key-value storage system available in the global React Native application.  

39. When we should use and not use the async storage>

Ans: The async storage should be used when:

• insensitive data is flowing across the application.
• The redux state is being used across the application.
• global variables are needed to be stored.

The async storage should not be used:

• for token storage
• for storing secrets

40. How to optimize a React Native application?

Ans: Following are the ways for optimizing a React Native application:

• Use compressed graphics.
• Minimize the size of the application using Proguard.
• Remove the unnecessary re-rendering by sung memoized and pure components.
• Avoid storing raw JSON data.
• For larger data sets, use VirtualizedList, SectionList, and FlatList.
• While using list items, use key attributes.

41. Suppose we have a header that behaves differently on IOS and Android. We need different styles for both operating systems. How can we determine the OS on which application is running?

Ans: React Native provides the “platform” module to determine the OS on which the application is running.

42. Explain bridge.

Ans: The bridge is a connection that is responsible for bundling the JavaScript and Native applications together. It is also referred to as a layer.

43. How to perform navigation in a React Native application?

Ans: “React Navigation” is used to perform navigation in a React native application. 

44. Example the CSS properties that are different in React Native.

Ans: Though most of the CSS properties are supported by React, there are few differences.

• In CSS, the default value of the “position” property is “static” but in React Native, it is “relative”.
• React Native supports only two values for the “display” property – “none” and “flex”.
• In React Native, “marginHorizontal” is equivalent to both “marginLeft” and “marginRIght”. Similarly, “marginVertical” is equivalent to both “marginTop” and “marginBottom”.

45. What are the different types of styling techniques in React Native?

Ans: The different types of styling techniques in React Native are:

• Style props
• Stylesheets
• styled-components

46. How is flexbox in React Native different from the CSS flexbox?

A – There is only one difference. The default value of “flexDirection” in React Native is “column” instead of “row”.

47. How to handle HTTP requests in React Native?

Ans: HTTP requests can be handled by using:

• the in-built fetch API.
• Third-party libraries such as Axios or frisbee.
• Websockets

48. How is Axios different from fetch()?

Ans: The Axios perform automatic JSON transformation while it is done manually in fetch(). Moreover, Axios provides wider browser support and HTTP interceptors.

49. Explain how React Native offers support for animations.

Ans: React Native provides two ways for animations.

• Animated: It is used for specific values
• LayoutAnimation: It is used for global layouts

50. How to prevent memory leaks in React Native?

Ans: Memory leaks can be prevented in React Native by releasing the listeners and timers that are added in componentDidMount. Another way of preventing memory leaks is by handling closure scopes.