1. What is React Native primarily used for?
Difficulty: EasyType: MCQTopic: RN Basics
- Building responsive websites
- Building cross-platform mobile apps using JavaScript
- Creating server-side Node.js applications
- Developing Chrome browser extensions
React Native is a JavaScript framework that allows developers to build native mobile applications for iOS and Android using the React library. It bridges JavaScript with native platform components, offering near-native performance and a single shared codebase.
Correct Answer: Building cross-platform mobile apps using JavaScript
2. Which statement best describes the difference between React and React Native?
Difficulty: EasyType: MCQTopic: RN Basics
- React is for mobile, React Native is for web
- React Native uses native mobile components while React uses web DOM elements
- React Native is faster than ReactJS in all cases
- React Native doesn’t support components
React is a library for building web interfaces using HTML elements like <div> and <p>. React Native replaces these with mobile-native components such as <View> and <Text>, allowing JavaScript to render actual native UI components.
Correct Answer: React Native uses native mobile components while React uses web DOM elements
3. Which of the following is NOT a core React Native component?
Difficulty: MediumType: MCQTopic: Core Components
- <View>
- <Text>
- <ScrollView>
- <Paragraph>
React Native provides a set of built-in core components like <View>, <Text>, <ScrollView>, and <Image>. <Paragraph> is not one of them; for styled text, you combine <Text> components instead.
Correct Answer: <Paragraph>
4. What does the React Native bridge do?
Difficulty: MediumType: MCQTopic: RN Architecture
- Connects React Native to the web browser
- Translates JavaScript code to native platform calls
- Manages styling between Android and iOS
- Stores state data across app sessions
The React Native bridge enables communication between the JavaScript thread and native threads. It converts JS commands into native code (Objective-C, Swift, Java, or Kotlin), which is then executed by the platform.
Correct Answer: Translates JavaScript code to native platform calls
5. What is the key difference between state and props in React Native?
Difficulty: EasyType: MCQTopic: State Props
- State is immutable; props are mutable
- Props are passed from parent to child; state is managed internally by the component
- Props can be changed by children; state cannot be used inside components
- Both are the same in React Native
Props are inputs passed to components, similar to function arguments. They are read-only. State is local data managed within the component and can change over time, causing re-renders.
Correct Answer: Props are passed from parent to child; state is managed internally by the component
6. Which React hook is used to add state to a functional component in React Native?
Difficulty: EasyType: MCQTopic: Hooks Basics
- useEffect
- useState
- useRef
- useContext
The useState hook lets you add internal component state to functional components. It returns a pair: the current state value and a function to update it.
Correct Answer: useState
Example Code
const [count, setCount] = useState(0);
7. What is JSX in the context of React Native?
Difficulty: MediumType: MCQTopic: JSX Basics
- A syntax extension that lets you write XML/HTML-like code inside JavaScript
- A JSON structure used for styling
- A built-in templating engine
- A tool to compile native code
JSX allows developers to describe UI components in a declarative way. It looks similar to HTML but compiles down to JavaScript function calls. In React Native, it represents <View>, <Text>, and other native components.
Correct Answer: A syntax extension that lets you write XML/HTML-like code inside JavaScript
8. Which method allows writing platform-specific code in React Native?
Difficulty: MediumType: MCQTopic: Platform Code
- Platform.select()
- React.usePlatform()
- AppRegistry.registerComponent()
- PlatformSpecific.run()
Platform.select() lets you define different implementations for iOS and Android. It’s commonly used when certain UI or logic should vary between platforms.
Correct Answer: Platform.select()
Example Code
const padding = Platform.select({ ios: 20, android: 10 });9. Explain the rendering process in React Native.
Difficulty: MediumType: SubjectiveTopic: Render Perf
React Native uses React’s virtual DOM concept to decide which parts of the UI need updating. When state or props change, React recalculates a virtual representation and compares it with the previous one. Only changed elements are sent to the native side through the bridge, minimizing performance cost.
Understanding this helps developers optimize components and avoid unnecessary re-renders.
10. Differentiate between class components and functional components in React Native.
Difficulty: MediumType: SubjectiveTopic: Core Components
Class components use ES6 classes and can access lifecycle methods like componentDidMount. Functional components are plain functions that return JSX and rely on hooks (like useState and useEffect) to manage state and side-effects.
Functional components are now the standard approach—they are shorter, easier to test, and better optimized by React.
11. Describe common lifecycle methods in React Native class components.
Difficulty: MediumType: SubjectiveTopic: Component Life
React Native class components share lifecycle methods with React. Key ones include:
- **componentDidMount()** → called once after initial render, good for fetching data.
- **componentDidUpdate()** → runs after updates.
- **componentWillUnmount()** → cleanup work like clearing timers or listeners.
These methods are now replaced by hooks like useEffect in functional components.
12. What are the main advantages of using React Native?
Difficulty: EasyType: SubjectiveTopic: RN Basics
React Native allows cross-platform development, saving time and cost by sharing code between iOS and Android. It uses native components for a smooth UI, supports live reload, and has a large ecosystem of prebuilt libraries.
It’s popular for startups and enterprises alike because it offers both speed and near-native performance.
13. What are some limitations or challenges of React Native?
Difficulty: MediumType: SubjectiveTopic: RN Basics
Some challenges include limited support for heavy native animations, dependency on third-party libraries, and occasional compatibility issues with new platform APIs. Complex apps may need native modules for performance-critical tasks.
Despite this, React Native remains powerful for most business applications with moderate native needs.
14. React Native supports which two main types of components?
Difficulty: EasyType: MCQTopic: Core Components
- Stateful and Stateless
- Controlled and Uncontrolled
- Class and Functional
- Parent and Child
React Native has class components that use ES6 classes and functional components that are simple functions returning JSX. Functional components are preferred in modern React Native because they work seamlessly with hooks.
Correct Answer: Class and Functional
15. What is the primary purpose of props in React Native?
Difficulty: EasyType: MCQTopic: State Props
- To manage internal component state
- To pass data from one component to another
- To trigger re-rendering manually
- To define navigation routes
Props are short for properties. They are read-only values passed from parent components to children. Props make components reusable and configurable without changing their internal logic.
Correct Answer: To pass data from one component to another
16. Which of the following statements about props is true?
Difficulty: EasyType: MCQTopic: State Props
- Props can be modified inside the child component
- Props are mutable data
- Props are immutable and cannot be changed by the component that receives them
- Props automatically update when the parent changes
Props are meant to be immutable. A child component should never modify them. If you need changeable data, use state instead. When the parent re-renders with new props, the child automatically gets updated values.
Correct Answer: Props are immutable and cannot be changed by the component that receives them
17. What is 'state' in a React Native component?
Difficulty: EasyType: MCQTopic: State Props
- A built-in database for local storage
- An object that stores dynamic data affecting how the component renders
- A configuration file for components
- A style definition for components
State is a built-in object in React components used to store data that can change over time. When state updates, React re-renders the component with the new values.
Correct Answer: An object that stores dynamic data affecting how the component renders
Example Code
const [count, setCount] = useState(0);
18. Why should you avoid modifying the state directly in React Native?
Difficulty: MediumType: MCQTopic: State Props
- It causes syntax errors
- It bypasses React's reconciliation and prevents re-renders
- It resets all props
- It is slower than using setState
State should only be changed using setState (for class components) or the setter from useState (for functional components). Direct modification won’t trigger a UI re-render and can lead to inconsistent data.
Correct Answer: It bypasses React's reconciliation and prevents re-renders
Example Code
this.setState({ count: this.state.count + 1 });19. What does 'lifting state up' mean in React Native?
Difficulty: MediumType: MCQTopic: State Props
- Moving data from child to parent for shared control
- Passing functions as props to children
- Reducing number of hooks in the app
- Sharing component styling
When two components need to share the same data, it’s best to lift the state up to their common ancestor and pass it down through props. This pattern keeps data consistent and avoids duplication.
Correct Answer: Moving data from child to parent for shared control
20. What is the purpose of useEffect in functional components?
Difficulty: MediumType: MCQTopic: Hooks Basics
- To handle side effects like API calls, subscriptions, or timers
- To update the state synchronously
- To define styles dynamically
- To memoize function results
useEffect allows you to perform side effects that are not directly related to rendering, such as fetching data or setting up event listeners. You can also return a cleanup function to handle unmounting logic.
Correct Answer: To handle side effects like API calls, subscriptions, or timers
Example Code
useEffect(() => { fetchData(); return () => cleanup(); }, []);21. Which technique is used to render elements conditionally in React Native?
Difficulty: EasyType: MCQTopic: Render Perf
- Using loops
- Using if/else or ternary expressions inside JSX
- Creating separate render files
- Using custom attributes
Conditional rendering in React Native can be done using simple JavaScript logic. The ternary operator is common: `{isLoggedIn ? <Home/> : <Login/>}`.
Correct Answer: Using if/else or ternary expressions inside JSX
22. Why are keys important when rendering lists in React Native?
Difficulty: MediumType: MCQTopic: Render Perf
- They improve animation performance
- They help React identify which items have changed or moved
- They define styles for list elements
- They trigger component updates manually
Keys help React efficiently update lists by identifying which items changed between renders. Without keys, React may re-render items unnecessarily, hurting performance.
Correct Answer: They help React identify which items have changed or moved
Example Code
data.map(item => <Text key={item.id}>{item.name}</Text>)23. Differentiate between props and state with examples.
Difficulty: MediumType: SubjectiveTopic: State Props
Props are read-only inputs passed to a component from its parent. For example, a button can receive a label as a prop.
State is data managed within the component and can change dynamically, like a counter. Changing state triggers a re-render, while props update when parents re-render.
24. How does state affect the React Native component lifecycle?
Difficulty: MediumType: SubjectiveTopic: State Props
Whenever the state changes, React recalculates the virtual UI and updates only the affected parts of the real UI. In class components, state changes trigger componentDidUpdate. In functional ones, they cause re-rendering within the same function scope.
Properly managing state avoids unnecessary renders and improves performance.
25. How can a child component communicate changes back to its parent in React Native?
Difficulty: MediumType: SubjectiveTopic: Component Comm
A parent can pass down a callback function as a prop. The child calls this function with the required data. This pattern allows controlled components and two-way communication while maintaining React’s one-way data flow.
Example Code
Parent → <Child onValueChange={(val) => setValue(val)} />
Child → props.onValueChange(newValue);26. What is the Context API and how is it useful in state management?
Difficulty: MediumType: SubjectiveTopic: Hooks Basics
The Context API provides a way to share values like theme or user data across components without prop drilling. You wrap parts of the app in a Provider and access the context value anywhere using useContext.
It’s great for global data, but for complex scenarios, libraries like Redux offer more structure.
27. What are common mistakes developers make with state and props?
Difficulty: MediumType: SubjectiveTopic: Best Practices
Common mistakes include mutating state directly, forgetting to use keys in lists, updating props inside children, and performing expensive operations in render functions. Avoid these by keeping components pure, using useMemo or memo for optimization, and respecting React’s one-way data flow.
28. Which of the following is not a valid way to style components in React Native?
Difficulty: EasyType: MCQTopic: RN Styling
- Inline styles using a style object
- Using StyleSheet.create()
- Using external CSS files
- Using styled-components library
React Native does not support traditional CSS files because it doesn’t use a web DOM. Styling is done using JavaScript objects, StyleSheet.create, or third-party libraries like styled-components.
Each style is written using camelCase property names similar to CSS but interpreted natively by the platform.
Correct Answer: Using external CSS files
29. What is the main advantage of using StyleSheet.create() in React Native?
Difficulty: EasyType: MCQTopic: RN Styling
- It prevents inline styles
- It reduces runtime overhead and validates style names
- It allows you to import CSS files
- It automatically converts colors to platform shades
StyleSheet.create() helps improve performance by freezing style definitions and preventing new object creation on each render.
It also validates property names, catching typos early during development.
Correct Answer: It reduces runtime overhead and validates style names
Example Code
const styles = StyleSheet.create({
container: { flex: 1, padding: 20 }
});30. What is the default flexDirection value in React Native?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- column
- row
- row-reverse
- column-reverse
Unlike web CSS where the default is row, React Native defaults flexDirection to column.
This means elements are stacked vertically unless changed to row explicitly.
Correct Answer: column
31. Which property controls how children are distributed along the main axis in Flexbox?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- alignItems
- justifyContent
- alignSelf
- flexGrow
justifyContent defines how children are positioned along the container’s main axis.
Values like 'flex-start', 'center', and 'space-between' determine how items are spaced within the parent view.
Correct Answer: justifyContent
32. Which property aligns items vertically when flexDirection is 'row'?
Difficulty: EasyType: MCQTopic: Flexbox Layout
- alignItems
- justifyContent
- alignSelf
- flexBasis
alignItems controls the cross-axis alignment of children. When flexDirection is 'row', it aligns items vertically.
Common values include 'flex-start', 'center', and 'stretch'.
Correct Answer: alignItems
33. Which property allows flex items to move onto multiple lines in React Native?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- flexWrap
- flexFlow
- wrap
- overflow
The flexWrap property lets items wrap onto multiple lines when there isn’t enough space.
By default, React Native uses 'nowrap', so you need to explicitly set flexWrap to 'wrap' to allow wrapping.
Correct Answer: flexWrap
34. Which Flexbox property allows a single child to override the parent’s alignment settings?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- alignSelf
- alignContent
- flexGrow
- justifyContent
alignSelf lets an individual child override its parent’s alignItems value.
For example, a single View can align itself differently while others follow the parent’s rule.
Correct Answer: alignSelf
35. Which property is used to control an element’s position relative to its parent in React Native?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- position
- zIndex
- flexBasis
- translate
React Native supports 'absolute' and 'relative' positioning through the position property.
When set to 'absolute', an element can be placed anywhere using top, left, right, and bottom values.
Correct Answer: position
36. Does React Native support the CSS gap property for Flexbox?
Difficulty: MediumType: MCQTopic: Flexbox Layout
- Yes, fully supported
- Partially supported
- No, not yet supported
- Only in iOS
As of now, React Native does not support the 'gap' property that exists in web Flexbox.
Developers achieve similar spacing using margin or by wrapping children inside spacing containers.
Correct Answer: No, not yet supported
37. How do you create a responsive layout in React Native?
Difficulty: MediumType: SubjectiveTopic: Flexbox Layout
React Native doesn’t use traditional CSS media queries, but it supports responsive layouts through Flexbox, percentages, and Dimensions API.
You can calculate screen width and height using Dimensions.get('window') and adjust layout dynamically. Flexbox ensures elements resize proportionally on different screens.
Example Code
const { width, height } = Dimensions.get('window');38. When should you use flex over fixed or percentage widths?
Difficulty: MediumType: SubjectiveTopic: Flexbox Layout
Use flex when you want elements to automatically fill available space relative to siblings.
Fixed or percentage widths are suitable for predictable layouts, while flex is better for dynamic screens that vary in size or orientation.
39. What are common Flexbox mistakes in React Native layouts?
Difficulty: MediumType: SubjectiveTopic: Best Practices
Common mistakes include confusing main and cross-axis directions, using row when column is intended, and combining alignItems and justifyContent incorrectly.
Developers also sometimes forget that React Native defaults to flexDirection: 'column', unlike web Flexbox where 'row' is default.
40. How does zIndex work in React Native compared to web CSS?
Difficulty: MediumType: SubjectiveTopic: Flexbox Layout
In React Native, zIndex works similarly to CSS—it controls the stacking order of positioned elements.
However, it only affects siblings within the same parent View. It doesn’t apply globally across the entire screen like in web browsers.
41. What are performance best practices for React Native layouts?
Difficulty: MediumType: SubjectiveTopic: Perf Tuning
Avoid deeply nested Views; it increases rendering cost.
Use flexbox efficiently to adapt to different screens without absolute positioning everywhere. Reuse styles with StyleSheet.create to avoid creating new objects each render. Also, minimize unnecessary re-renders with React.memo or PureComponent.
42. What is React Navigation used for in React Native?
Difficulty: EasyType: MCQTopic: App Navigation
- Handling animations
- Managing app navigation and screen transitions
- Styling components
- Accessing device sensors
React Navigation is a popular library for managing navigation in React Native apps.
It allows developers to move between screens, handle stacks, tabs, and drawers, and maintain a predictable navigation state across the app.
Correct Answer: Managing app navigation and screen transitions
43. Which command installs React Navigation in a React Native project?
Difficulty: EasyType: MCQTopic: RN Setup
- npm install react-native-navigation
- npm install @react-navigation/native
- npm install react-navigation-core
- npm install navigation-react
React Navigation version 5 and above is installed with @react-navigation/native as the core package.
You must also install required peer dependencies like react-native-screens and react-native-safe-area-context to make it work.
Correct Answer: npm install @react-navigation/native
44. Which of the following libraries is required to enable gestures in React Navigation?
Difficulty: MediumType: MCQTopic: RN Setup
- react-native-gesture-handler
- react-native-animations
- react-native-reanimated
- react-native-swipe
React Navigation uses react-native-gesture-handler to handle swipe and tap gestures for screen transitions.
It must be installed and linked correctly before using navigators like StackNavigator or DrawerNavigator.
Correct Answer: react-native-gesture-handler
45. Which navigator provides a classic push-and-pop navigation pattern?
Difficulty: MediumType: MCQTopic: App Navigation
- Tab Navigator
- Drawer Navigator
- Stack Navigator
- Switch Navigator
Stack Navigator allows navigation between screens in a stack-like manner.
Each new screen is pushed on top of the previous one, and going back pops the current screen off the stack.
Correct Answer: Stack Navigator
46. Which function is used to create a stack navigator in React Navigation v6?
Difficulty: EasyType: MCQTopic: App Navigation
- createStack()
- createStackNavigator()
- useStackNavigator()
- Stack.Navigator()
React Navigation exports the createStackNavigator function from @react-navigation/stack.
It returns two components — Stack.Navigator and Stack.Screen — that define navigation structure and screens.
Correct Answer: createStackNavigator()
Example Code
import { createStackNavigator } from '@react-navigation/stack';47. How do you navigate to another screen in React Navigation?
Difficulty: MediumType: MCQTopic: App Navigation
- this.redirect('ScreenB')
- navigation.push('ScreenB')
- navigation.navigate('ScreenB')
- Navigator.open('ScreenB')
Each screen receives a navigation prop that provides methods to control navigation.
navigation.navigate('ScreenB') moves to ScreenB if it’s part of the navigator hierarchy.
Correct Answer: navigation.navigate('ScreenB')
Example Code
navigation.navigate('Profile');48. How can you pass parameters between screens in React Navigation?
Difficulty: MediumType: MCQTopic: App Navigation
- navigation.send('ScreenB', { data })
- navigation.navigate('ScreenB', { data })
- props.route('ScreenB', { data })
- route.push('ScreenB', data)
You can pass parameters to another screen by adding an object as the second argument to navigation.navigate.
The receiving screen accesses the data via route.params.
Correct Answer: navigation.navigate('ScreenB', { data })
Example Code
navigation.navigate('Details', { id: 10 });49. How do you access parameters passed to a screen?
Difficulty: EasyType: MCQTopic: App Navigation
- props.navigation.params
- props.route.params
- navigation.state.params
- useRouteParams()
Each screen in React Navigation receives two props — navigation and route.
The route object contains information about the current route, including any params passed from previous screens.
Correct Answer: props.route.params
Example Code
const { id } = route.params;50. Which package is used to create bottom tab navigation?
Difficulty: MediumType: MCQTopic: App Navigation
- @react-navigation/tabs
- @react-navigation/drawer
- @react-navigation/stack
- react-native-tabs
The @react-navigation/tabs package provides BottomTabNavigator and MaterialTopTabNavigator.
It’s ideal for organizing multiple related sections of an app like Home, Profile, or Settings.
Correct Answer: @react-navigation/tabs
51. Explain how nested navigators work in React Navigation.
Difficulty: MediumType: SubjectiveTopic: App Navigation
React Navigation supports nesting navigators inside one another to create complex navigation structures.
For example, you can have a TabNavigator inside a StackNavigator or vice versa. Each nested navigator manages its own navigation state but still communicates with parent navigators for transitions and back actions.
52. What is a Drawer Navigator and when should you use it?
Difficulty: MediumType: SubjectiveTopic: App Navigation
A Drawer Navigator provides a sidebar that slides in from the left or right. It’s used when you have multiple major sections like Settings, Profile, and Help.
It helps users navigate across top-level destinations without crowding the main UI. Drawer navigation is common in enterprise or dashboard-type apps.
53. Describe how the navigation stack works in React Navigation.
Difficulty: MediumType: SubjectiveTopic: App Navigation
The navigation stack works on the principle of push and pop. When a screen is opened using navigation.navigate, it’s pushed on top of the stack.
When you press the back button or call navigation.goBack(), the current screen is popped off and control returns to the previous one.
54. Can you pass functions between screens in React Navigation?
Difficulty: MediumType: SubjectiveTopic: App Navigation
Yes, you can pass functions as parameters using navigation.navigate('ScreenB', { callback }) and call them from the target screen.
However, it’s often better to use a global state manager like Context or Redux when multiple screens need to share logic or callbacks.
55. What is deep linking in React Navigation and how is it configured?
Difficulty: HardType: SubjectiveTopic: App Navigation
Deep linking allows external links (like myapp://profile/123 or https://myapp.com/profile/123) to open specific screens in your app.
It’s configured in NavigationContainer with a linking object that defines routes and URL patterns. It helps integrate React Native apps with the broader web or external systems.
56. Which React hook lets you add internal state to functional components in React Native?
Difficulty: EasyType: MCQTopic: State Props
- useEffect
- useState
- useReducer
- useContext
useState allows a functional component to hold local state.
It returns an array containing the current state value and a function to update it. Updating the state automatically re-renders the component.
Correct Answer: useState
Example Code
const [count, setCount] = useState(0);
57. What is the purpose of the useEffect hook?
Difficulty: EasyType: MCQTopic: Hooks Basics
- To define event handlers
- To perform side-effects such as API calls or subscriptions
- To optimize component rendering
- To manage global state
useEffect runs after the component renders and is used for effects like fetching data, setting timers, or subscribing to events.
You can also return a cleanup function to remove listeners when the component unmounts.
Correct Answer: To perform side-effects such as API calls or subscriptions
Example Code
useEffect(() => { fetchData(); return () => cleanup(); }, []);58. Which hook provides a way to hold a mutable value that doesn’t trigger re-renders?
Difficulty: MediumType: MCQTopic: Hooks Basics
- useMemo
- useRef
- useState
- useCallback
useRef stores a value that persists across renders without causing re-renders when it changes.
It’s often used to reference DOM or native elements, or to store mutable variables like timers.
Correct Answer: useRef
Example Code
const timer = useRef(null);
59. What problem does the Context API solve in React Native?
Difficulty: MediumType: MCQTopic: Context API
- It replaces component state
- It avoids prop drilling by providing global data access
- It handles navigation between screens
- It improves animation performance
The Context API allows data to be shared globally without manually passing props through multiple component levels.
It’s commonly used for global themes, authentication data, or language settings.
Correct Answer: It avoids prop drilling by providing global data access
60. What does useReducer help with in React Native?
Difficulty: MediumType: MCQTopic: Redux Basics
- Managing side-effects
- Handling complex state logic using reducers
- Writing asynchronous code
- Styling components
useReducer provides a predictable way to manage state transitions by dispatching actions.
It’s ideal when you have multiple related state values or complex update rules, similar to Redux’s reducer pattern.
Correct Answer: Handling complex state logic using reducers
Example Code
const [state, dispatch] = useReducer(reducer, initialState);
61. Why is Redux often used in React Native projects?
Difficulty: MediumType: MCQTopic: Redux Basics
- To style components
- To manage global application state centrally
- To improve app navigation speed
- To handle animations
Redux provides a single centralized store that holds all application state.
It ensures consistent behavior and makes debugging easier with tools like Redux DevTools.
Correct Answer: To manage global application state centrally
62. What does the Redux store do?
Difficulty: MediumType: MCQTopic: Redux Basics
- Stores components
- Stores the complete state tree of the app
- Handles navigation
- Applies styles
The store in Redux is a single object that holds the global state tree.
Components subscribe to relevant parts of the store and dispatch actions to update it through reducers.
Correct Answer: Stores the complete state tree of the app
63. What are actions in Redux?
Difficulty: MediumType: MCQTopic: Redux Basics
- Pure functions that return new state
- Objects describing what change should happen
- Middleware functions
- React components
Actions are plain JavaScript objects with a type property that describes the event or intent.
Reducers use these actions to decide how to update the store’s state.
Correct Answer: Objects describing what change should happen
Example Code
dispatch({ type: 'INCREMENT' });64. What is the correct order of data flow in Redux?
Difficulty: MediumType: MCQTopic: Redux Basics
- Reducer → Store → Action → View
- View → Action → Reducer → Store → View
- Store → Reducer → Action → View
- Action → View → Reducer → Store
The Redux flow starts when a user interacts with the view, which dispatches an action.
The reducer processes the action, updates the store, and the updated state re-renders the view.
Correct Answer: View → Action → Reducer → Store → View
65. Compare the Context API and Redux in terms of usage and scalability.
Difficulty: MediumType: SubjectiveTopic: Redux Basics
The Context API is simple and built into React. It works well for small-scale global data like themes or user preferences.
Redux, on the other hand, provides structured state management with reducers, middleware, and debugging tools, making it better for large, complex apps with frequent updates.
66. What is middleware in Redux and why is it important?
Difficulty: MediumType: SubjectiveTopic: Redux Basics
Middleware acts as a layer between dispatching an action and reaching the reducer.
It is used for logging, asynchronous operations (like Redux Thunk or Saga), and side-effects such as API calls. This keeps reducers pure and predictable.
67. Explain the purpose of Redux Thunk in React Native.
Difficulty: MediumType: SubjectiveTopic: Redux Basics
Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action object.
This function can perform asynchronous tasks such as fetching data before dispatching the actual action, making it ideal for network calls in React Native apps.
Example Code
export const fetchUsers = () => async dispatch => { const res = await api.get('/users'); dispatch({ type: 'SET_USERS', payload: res.data }); };68. What are common performance issues in state management and how can they be prevented?
Difficulty: MediumType: SubjectiveTopic: Perf Tuning
Common issues include unnecessary re-renders, overuse of Context, and not memoizing expensive computations.
Use React.memo, useCallback, and useMemo to prevent re-renders, and split contexts when data updates frequently.
69. How can you persist Redux state in React Native between app restarts?
Difficulty: MediumType: SubjectiveTopic: Async Storage
You can use AsyncStorage along with redux-persist to save and rehydrate state.
This ensures that user data, preferences, or login sessions are retained even when the app restarts.
70. Which built-in method is commonly used for making HTTP requests in React Native?
Difficulty: EasyType: MCQTopic: API Requests
- request()
- fetch()
- axios()
- sendRequest()
The Fetch API is a built-in JavaScript method for making network requests.
It returns a promise and allows handling of JSON data easily using async / await or then / catch.
Correct Answer: fetch()
Example Code
fetch('https://api.example.com/data').then(res => res.json());71. How do you install Axios in a React Native project?
Difficulty: EasyType: MCQTopic: API Requests
- npm install react-native-axios
- npm install axios
- yarn add http-axios
- axios comes built-in with React Native
Axios is a third-party HTTP client that simplifies network requests.
It must be installed separately using npm or yarn before importing into components.
Correct Answer: npm install axios
72. Why is async / await preferred over plain promises in React Native?
Difficulty: MediumType: MCQTopic: Async JS
- It increases network speed
- It allows writing asynchronous code in a cleaner, synchronous-looking style
- It automatically retries failed requests
- It reduces bundle size
async / await helps structure asynchronous code in a linear, readable way.
It improves error handling using try / catch and avoids deeply nested then / catch chains.
Correct Answer: It allows writing asynchronous code in a cleaner, synchronous-looking style
Example Code
const res = await fetch(url); const data = await res.json();
73. Which block is used with async / await to handle request errors?
Difficulty: MediumType: MCQTopic: Error Handling
- try / catch
- throw / handle
- if / else
- catchOnly
Errors in async functions are caught using try / catch blocks.
This ensures that failed API calls or JSON parsing errors don’t crash the app and can be handled gracefully.
Correct Answer: try / catch
Example Code
try { const res = await fetch(url); } catch(e) { console.error(e); }74. Which statement correctly compares Axios and Fetch?
Difficulty: MediumType: MCQTopic: API Requests
- Fetch automatically parses JSON responses, Axios does not
- Axios automatically parses JSON responses and supports interceptors
- Axios is slower than Fetch
- Fetch supports interceptors natively
Axios automatically converts JSON responses and provides request / response interceptors.
Fetch requires manual response.json() calls and additional logic for interceptors.
Correct Answer: Axios automatically parses JSON responses and supports interceptors
75. Which property in the response object helps check if the Fetch API request succeeded?
Difficulty: MediumType: MCQTopic: Error Handling
- statusText
- ok
- responseCode
- success
The 'ok' property of the Fetch API response object is true for status codes 200–299.
It’s a quick way to confirm whether the request was successful before reading the body.
Correct Answer: ok
Example Code
if (!response.ok) throw new Error('Network error');76. Which library supports setting request timeouts directly?
Difficulty: MediumType: MCQTopic: API Requests
- Fetch
- Axios
- XMLHttpRequest
- None of the above
Axios supports request timeouts through the timeout configuration option.
Fetch does not have native timeout handling; developers must use AbortController instead.
Correct Answer: Axios
Example Code
axios.get(url, { timeout: 5000 });77. How can custom headers be added to a Fetch API request?
Difficulty: EasyType: MCQTopic: App Navigation
- By passing a headers object as the second argument
- By editing global fetch config
- By using localStorage
- By wrapping fetch in Axios
Headers can be sent with fetch by including them in the options parameter.
This is useful for authentication tokens or content-type declarations.
Correct Answer: By passing a headers object as the second argument
Example Code
fetch(url, { headers: { 'Authorization': 'Bearer token' } });78. What is AbortController used for in Fetch API?
Difficulty: MediumType: MCQTopic: API Requests
- To cancel ongoing requests
- To retry failed requests automatically
- To track progress
- To log network activity
AbortController allows cancellation of an ongoing fetch call to free network resources.
It’s often used when users leave a screen before a response arrives.
Correct Answer: To cancel ongoing requests
Example Code
const controller = new AbortController(); fetch(url, { signal: controller.signal }); controller.abort();79. How can you cache API responses in a React Native app?
Difficulty: MediumType: SubjectiveTopic: API Requests
You can use libraries like react-query or AsyncStorage to cache responses locally.
Caching reduces network calls and improves performance by serving previously fetched data instantly.
80. Describe a pattern to show loading and error states while fetching data.
Difficulty: MediumType: SubjectiveTopic: API Requests
Maintain three pieces of state — loading, data, and error.
Start with loading = true, then update data or error once the request resolves or fails. This pattern helps render conditional UI feedback for users.
81. How can you configure a global Axios instance for all network calls?
Difficulty: MediumType: SubjectiveTopic: API Requests
Create an Axios instance using axios.create() with baseURL and common headers.
Import this instance across files to ensure all requests share consistent configurations like interceptors and tokens.
Example Code
const api = axios.create({ baseURL: 'https://api.app.com', headers: { 'Auth': token } });82. How can you handle file uploads in React Native using Fetch or Axios?
Difficulty: MediumType: SubjectiveTopic: API Requests
Use FormData to append file objects and send them via POST requests.
Make sure headers include 'Content-Type': 'multipart/form-data'. Axios handles boundary setup automatically, while Fetch requires manual setup.
83. List some best practices for secure and efficient API integration.
Difficulty: MediumType: SubjectiveTopic: Best Practices
Avoid hard-coding API URLs and keys inside source files.
Use environment variables, handle timeouts, validate responses, and cache frequent requests. Always clean up subscriptions to prevent memory leaks.
84. What are native modules in React Native?
Difficulty: EasyType: MCQTopic: Native Modules
- JavaScript libraries for styling
- Bridges that connect JavaScript code with native platform APIs
- Packages for handling images
- Tools for testing React apps
Native modules allow React Native apps to access native platform features like camera, sensors, or Bluetooth using Java or Swift.
They bridge the gap between JavaScript and native environments so both can communicate seamlessly.
Correct Answer: Bridges that connect JavaScript code with native platform APIs
85. What is the role of the bridge in React Native architecture?
Difficulty: MediumType: MCQTopic: Native Modules
- It converts CSS styles to native views
- It synchronizes JavaScript and native threads by passing serialized messages
- It compiles JavaScript to native binaries
- It manages navigation between screens
The bridge is the communication layer that sends messages between the JavaScript thread and native threads.
This mechanism ensures that native features and UI elements can be controlled using JavaScript APIs.
Correct Answer: It synchronizes JavaScript and native threads by passing serialized messages
86. What is JNI used for in React Native’s Android side integration?
Difficulty: MediumType: MCQTopic: Native Modules
- For network communication
- For calling native C/C++ code from Java
- For styling native components
- For managing memory leaks
JNI (Java Native Interface) allows Java code to interact with C or C++ libraries.
React Native internally uses JNI to enable deep integrations between JavaScript and native performance modules.
Correct Answer: For calling native C/C++ code from Java
87. Which decorator or method exposes a native Java class to React Native’s JavaScript side?
Difficulty: MediumType: MCQTopic: Native Modules
- @ReactMethod
- @BridgeMethod
- exposeToJS()
- @NativeBridge
In Android native modules, methods annotated with @ReactMethod become accessible from JavaScript.
These methods are exported automatically when the module is registered with ReactPackage.
Correct Answer: @ReactMethod
88. What is the role of ReactPackage in Android native modules?
Difficulty: MediumType: MCQTopic: RN Setup
- It handles API requests
- It registers native modules and view managers with React Native
- It optimizes app performance
- It initializes navigation
ReactPackage is an interface that exposes a list of native modules and UI components to the JavaScript side.
Every custom native module must be added inside the createNativeModules() method of a ReactPackage implementation.
Correct Answer: It registers native modules and view managers with React Native
89. Which macro is used in Objective-C to export native methods to JavaScript?
Difficulty: MediumType: MCQTopic: Native Modules
- RCT_EXPORT()
- EXPORT_NATIVE()
- RCT_EXPORT_METHOD()
- NATIVE_METHOD()
The RCT_EXPORT_METHOD macro exposes an Objective-C method to the JavaScript runtime.
It allows React Native’s bridge to call native iOS functionality from JavaScript code.
Correct Answer: RCT_EXPORT_METHOD()
90. On which thread does JavaScript code run in React Native?
Difficulty: MediumType: MCQTopic: Thread Model
- UI thread
- Bridge thread
- JavaScript thread
- Native module thread
React Native maintains a separate JavaScript thread where all JS logic executes.
This prevents blocking the UI thread and allows smooth animations and user interactions.
Correct Answer: JavaScript thread
91. How does communication between native and JS layers usually happen?
Difficulty: MediumType: MCQTopic: Component Comm
- Through JSON messages over the bridge
- Through direct memory sharing
- Using WebSocket
- Through Redux store
The React Native bridge serializes function calls and arguments into JSON messages.
These messages travel asynchronously between JavaScript and native threads for two-way communication.
Correct Answer: Through JSON messages over the bridge
92. What improvement do TurboModules bring to the React Native bridge?
Difficulty: MediumType: MCQTopic: New Architecture
- They use JavaScriptCore for synchronous calls
- They replace the old bridge with a faster, JSI-based system
- They remove native code entirely
- They only optimize UI updates
TurboModules use the JavaScript Interface (JSI) to directly call native code without serializing messages.
This reduces latency and significantly improves communication speed between JS and native layers.
Correct Answer: They replace the old bridge with a faster, JSI-based system
93. What are native view managers and how are they used in React Native?
Difficulty: MediumType: SubjectiveTopic: Native Modules
Native view managers allow developers to create custom UI components using native platform views.
They expose these views to JavaScript so React Native can render them like regular components. Each view manager defines properties and methods accessible from JS.
94. Explain the concept of JSI (JavaScript Interface) and its benefits over the old bridge.
Difficulty: HardType: SubjectiveTopic: New Architecture
JSI allows JavaScript to call native code directly without using asynchronous JSON serialization.
It improves performance by removing the overhead of message passing, enabling synchronous function calls and direct memory sharing between JS and native code.
95. How can a native module send events to JavaScript in React Native?
Difficulty: MediumType: SubjectiveTopic: Native Modules
Native modules use the RCTDeviceEventEmitter on iOS or ReactContext’s sendEvent method on Android to emit events.
This is useful when native code needs to notify JS about background tasks, downloads, or hardware events.
96. What are some limitations of the old React Native bridge architecture?
Difficulty: MediumType: SubjectiveTopic: Native Modules
The old bridge was asynchronous and relied on JSON serialization, which created latency between JavaScript and native layers.
It also struggled with large data transfers like images or audio streams. JSI and Fabric now address these limitations.
97. Give a real-world example where creating a custom native module is necessary.
Difficulty: MediumType: SubjectiveTopic: Native Modules
A custom native module is useful when you need a feature not yet supported by React Native or third-party libraries.
For example, integrating a specialized Bluetooth SDK, using advanced camera APIs, or controlling device audio routing directly on Android.
98. Which hook helps prevent unnecessary re-renders of components in React Native?
Difficulty: MediumType: MCQTopic: Render Perf
- useEffect
- useRef
- useMemo
- useCallback
useMemo caches the result of a function between renders so it only recalculates when dependencies change.
It prevents expensive operations from running unnecessarily, improving performance during re-renders.
Correct Answer: useMemo
Example Code
const value = useMemo(() => computeExpensiveValue(a, b), [a, b]);
99. Which higher-order component is used to avoid re-rendering functional components when props haven't changed?
Difficulty: MediumType: MCQTopic: Render Perf
- React.memo()
- PureComponent
- useEffect()
- React.lazy()
React.memo wraps a functional component and skips re-rendering if props are the same as before.
It is useful for optimizing list items or child components that receive frequent updates.
Correct Answer: React.memo()
Example Code
export default React.memo(MyComponent);
100. What is the difference between React.Component and React.PureComponent?
Difficulty: MediumType: MCQTopic: Render Perf
- PureComponent automatically performs a shallow comparison of props and state
- PureComponent updates faster because it skips render method
- Component is deprecated
- PureComponent is only used for hooks
PureComponent helps prevent unnecessary updates by checking whether props or state have actually changed.
It’s useful for class components where performance is important, similar to React.memo for functional ones.
Correct Answer: PureComponent automatically performs a shallow comparison of props and state
101. Why is FlatList preferred over ScrollView for large lists?
Difficulty: MediumType: MCQTopic: List Views
- It supports horizontal scrolling
- It renders only visible items for better memory efficiency
- It provides custom styling by default
- It automatically caches network data
FlatList uses lazy loading and virtualization, meaning only items currently visible on the screen are rendered.
This drastically reduces memory usage and improves performance on large lists.
Correct Answer: It renders only visible items for better memory efficiency
102. Why is providing a keyExtractor important in FlatList?
Difficulty: EasyType: MCQTopic: List Views
- It helps optimize animations
- It helps React efficiently identify which items changed
- It enables pull-to-refresh
- It reduces network requests
React uses keys to detect which items are added, removed, or moved.
Providing a unique key improves rendering speed and ensures smooth updates to the list.
Correct Answer: It helps React efficiently identify which items changed
Example Code
keyExtractor={(item) => item.id.toString()}103. What is Hermes in React Native?
Difficulty: MediumType: MCQTopic: JS Engine
- A native debugging tool
- A JavaScript engine optimized for React Native
- A state management library
- A network API handler
Hermes is a small and efficient JavaScript engine designed to improve app startup time and reduce memory usage.
It compiles JavaScript ahead of time into bytecode, optimizing performance for Android and iOS.
Correct Answer: A JavaScript engine optimized for React Native
104. Which tool is commonly used for performance profiling in React Native?
Difficulty: MediumType: MCQTopic: Perf Tuning
- React Developer Tools Profiler
- Metro Bundler CLI
- Redux Logger
- React Navigation Debugger
React Developer Tools includes a Profiler tab that records rendering times of components.
It helps identify slow components and optimize re-render-heavy areas in the app.
Correct Answer: React Developer Tools Profiler
105. What is a common cause of memory leaks in React Native?
Difficulty: MediumType: MCQTopic: Perf Tuning
- Using functional components
- Not cleaning up subscriptions or timers in useEffect
- Rendering FlatList with few items
- Using AsyncStorage for caching
Forgetting to clear intervals, event listeners, or subscriptions in useEffect cleanup functions can lead to memory leaks.
These leaks cause the app to retain unnecessary memory, affecting performance over time.
Correct Answer: Not cleaning up subscriptions or timers in useEffect
106. Which console method helps measure how long a function takes to execute?
Difficulty: EasyType: MCQTopic: Perf Tuning
- console.time()
- console.profile()
- console.debug()
- console.logtime()
console.time() and console.timeEnd() measure the duration of code execution between the two calls.
They are useful for quick performance checks during development and debugging.
Correct Answer: console.time()
Example Code
console.time('fetch'); fetchData(); console.timeEnd('fetch');107. What are common reasons for slow rendering in React Native apps?
Difficulty: MediumType: SubjectiveTopic: Perf Tuning
Slow rendering often happens due to heavy re-renders, large image processing, or unnecessary state updates.
Optimizing components with React.memo, compressing assets, and using FlatList for lists can significantly improve UI responsiveness.
108. Explain how useCallback helps in performance optimization.
Difficulty: MediumType: SubjectiveTopic: Hooks Basics
useCallback memoizes function definitions, ensuring the same reference is used between renders unless dependencies change.
This prevents child components wrapped with React.memo from re-rendering when their props contain unchanged callback functions.
109. How can image handling impact React Native performance?
Difficulty: MediumType: SubjectiveTopic: Perf Tuning
Unoptimized or large images consume significant memory and slow down UI rendering.
Use the Image component’s caching features, serve WebP formats, and load lower-resolution thumbnails for previews to enhance speed.
110. Name some debugging tools used in React Native development.
Difficulty: MediumType: SubjectiveTopic: Debug Tools
Common tools include Flipper, React Developer Tools, Chrome DevTools, and Reactotron.
They allow inspecting component hierarchy, viewing logs, tracking Redux actions, and analyzing network performance in real-time.
111. What happens when the JavaScript thread is blocked, and how can it be avoided?
Difficulty: HardType: SubjectiveTopic: Thread Model
If the JS thread is blocked by heavy computation or infinite loops, the app becomes unresponsive because UI updates depend on it.
To prevent this, offload heavy tasks to native modules or use libraries like react-native-reanimated or worker threads for background execution.
112. What is Jest primarily used for in React Native projects?
Difficulty: EasyType: MCQTopic: Test Tools
- End-to-end testing
- Unit testing and snapshot testing
- UI animation testing
- Integration with Firebase
Jest is a testing framework developed by Meta for unit and snapshot testing in JavaScript and React Native apps.
It provides built-in mocking, code coverage, and a zero-config setup for fast feedback.
Correct Answer: Unit testing and snapshot testing
Example Code
test('renders correctly', () => { const tree = renderer.create(<App />).toJSON(); expect(tree).toMatchSnapshot(); });113. What kind of testing does Detox perform?
Difficulty: MediumType: MCQTopic: Test Tools
- Unit testing
- End-to-end testing
- API testing
- Accessibility testing
Detox is used for end-to-end (E2E) testing in React Native. It automates user interactions on real devices or emulators.
It ensures the entire app flow works as expected — from UI to backend communication.
Correct Answer: End-to-end testing
114. What does snapshot testing in Jest verify?
Difficulty: MediumType: MCQTopic: Test Tools
- It verifies the component renders the same UI as before
- It verifies API responses
- It validates Redux state changes
- It compares performance metrics
Snapshot testing ensures that the output of a component hasn’t changed unexpectedly.
When a UI change is intentional, developers must update the stored snapshot manually.
Correct Answer: It verifies the component renders the same UI as before
115. Which Jest function allows you to replace real modules with test doubles?
Difficulty: MediumType: MCQTopic: Test Tools
- jest.replace()
- jest.mock()
- jest.spyOn()
- jest.useFakeTimers()
jest.mock() replaces real modules or dependencies with fake ones for isolated testing.
This helps test components without performing actual API calls or file reads.
Correct Answer: jest.mock()
Example Code
jest.mock('axios', () => ({ get: jest.fn() }));116. Which command is used to execute Detox tests from the CLI?
Difficulty: MediumType: MCQTopic: Test Tools
- detox run --all
- detox test
- npm run detox
- detox start
The detox test command launches the testing environment, builds the app, and runs all configured E2E tests.
You can specify a configuration to target Android or iOS builds individually.
Correct Answer: detox test
117. What is the purpose of Microsoft CodePush in React Native?
Difficulty: MediumType: MCQTopic: CodePush OTA
- To automate native builds
- To push over-the-air (OTA) JS updates without app store submission
- To manage Firebase credentials
- To deploy new native modules
CodePush allows developers to update JavaScript bundles and assets directly to users’ devices.
It avoids waiting for app store approval while still respecting app store policies for non-native updates.
Correct Answer: To push over-the-air (OTA) JS updates without app store submission
118. Which CI/CD platform allows automated builds using YAML configuration files stored in the repository?
Difficulty: MediumType: MCQTopic: CI CD
- Jenkins
- GitHub Actions
- CircleCI
- Azure DevOps
GitHub Actions provides a YAML-based CI/CD workflow directly inside the repository.
You can automate testing, building, and deployment for React Native apps across Android and iOS targets.
Correct Answer: GitHub Actions
119. What file format is commonly used to store environment variables in React Native projects?
Difficulty: EasyType: MCQTopic: CI CD
- .env
- .environment
- .config
- .rc
Environment variables are usually stored in .env files and accessed using libraries like react-native-dotenv.
This helps separate sensitive data like API keys from source code.
Correct Answer: .env
120. Which step typically comes first in a CI/CD pipeline?
Difficulty: MediumType: MCQTopic: CI CD
- Deploy
- Build
- Test
- Checkout or clone repository
The first step in a CI/CD pipeline is to fetch the project repository code.
Subsequent steps like build, test, and deploy run sequentially on the freshly cloned codebase.
Correct Answer: Checkout or clone repository
121. Compare Jest and Detox testing in React Native.
Difficulty: MediumType: SubjectiveTopic: Test Tools
Jest focuses on unit and snapshot testing of individual components or functions. It runs entirely in JavaScript and doesn’t require a simulator.
Detox performs end-to-end testing by running real user flows on actual devices or emulators. It validates the integration of components and APIs together.
122. What are the key benefits of implementing CI/CD for React Native apps?
Difficulty: MediumType: SubjectiveTopic: CI CD
CI/CD ensures continuous integration of code changes and automated delivery to testers or app stores.
It improves team collaboration, reduces manual errors, and speeds up release cycles through automation and consistent build validation.
123. Describe the workflow of updating an app using CodePush.
Difficulty: MediumType: SubjectiveTopic: CodePush OTA
First, make JavaScript or asset changes and bundle them using the React Native CLI. Then, use the appcenter CLI to push the update to CodePush servers.
The next time the user opens the app, CodePush downloads and applies the update automatically without requiring reinstallation.
124. How do you measure and improve test coverage in React Native?
Difficulty: MediumType: SubjectiveTopic: Test Tools
Jest can generate coverage reports using the --coverage flag, showing which files or lines are untested.
Developers can then write additional unit or integration tests to cover untested branches, ensuring stable codebases before deployment.
125. Outline the typical steps for deploying a React Native app to production.
Difficulty: MediumType: SubjectiveTopic: App Release
First, generate a release build for both Android and iOS. Then, sign the builds using production keys.
Next, upload them to Google Play and Apple App Store. You can later use CodePush for small over-the-air updates between releases.
126. What does JSI stand for in React Native’s new architecture?
Difficulty: MediumType: MCQTopic: New Architecture
- JavaScript Interface
- JavaScript Integrator
- Java Sync Interface
- JavaScript Interpreter
JSI stands for JavaScript Interface. It allows JavaScript code to directly call C++ and native methods without serialization.
This results in faster communication between JS and native layers compared to the old JSON bridge.
Correct Answer: JavaScript Interface
127. How does JSI differ from the old React Native bridge?
Difficulty: MediumType: MCQTopic: Native Modules
- JSI is synchronous and doesn’t use JSON serialization
- JSI runs only on Android
- JSI uses WebAssembly internally
- Both are identical in performance
Unlike the old bridge, which passed data asynchronously using JSON messages, JSI allows direct, synchronous function calls between JavaScript and native code.
This drastically improves speed and reduces message overhead.
Correct Answer: JSI is synchronous and doesn’t use JSON serialization
128. What is Fabric in React Native’s new architecture?
Difficulty: MediumType: MCQTopic: New Architecture
- A styling engine
- The new rendering system replacing the old UI manager
- A layout debugging tool
- A state management API
Fabric is React Native’s new rendering layer that replaces the old UIManager.
It makes rendering faster and more consistent by synchronizing React Fiber and native UI updates directly through JSI.
Correct Answer: The new rendering system replacing the old UI manager
129. What is the key advantage of TurboModules?
Difficulty: MediumType: MCQTopic: New Architecture
- They allow synchronous access to native modules
- They eliminate native dependencies
- They replace React Hooks
- They make JSX faster
TurboModules use JSI to directly call native functions synchronously.
This makes data exchange between JS and native modules faster and more memory-efficient compared to the old bridge system.
Correct Answer: They allow synchronous access to native modules
130. Which feature of React 18 does Fabric leverage for smoother UI rendering?
Difficulty: MediumType: MCQTopic: New Architecture
- Automatic Batching
- Concurrent Rendering
- Suspense for Data Fetching
- Strict Mode
Fabric supports React 18’s concurrent rendering mode, allowing the UI to remain responsive even during heavy updates.
It helps React Native manage priorities and smoothly render partial updates.
Correct Answer: Concurrent Rendering
131. Which configuration flag enables the new architecture in a React Native project?
Difficulty: MediumType: MCQTopic: RN Upgrade
- newArchitectureEnabled=true
- enableNewJSI=true
- fabric.enabled=true
- RN_ENABLE_BRIDGE=false
To enable the new architecture, set newArchitectureEnabled=true in gradle.properties for Android and the equivalent flag in Podfile for iOS.
This activates JSI, TurboModules, and Fabric rendering features.
Correct Answer: newArchitectureEnabled=true
132. What is the role of C++ in the new React Native architecture?
Difficulty: MediumType: MCQTopic: New Architecture
- To compile JavaScript directly
- To provide a unified interface layer between JS and native platforms
- To replace JavaScriptCore
- To build UI automatically
React Native’s new architecture uses a shared C++ core that connects JavaScript and native code.
It ensures consistent performance and reduces duplication between Android and iOS implementations.
Correct Answer: To provide a unified interface layer between JS and native platforms
133. Why is Hermes recommended when using the new architecture?
Difficulty: MediumType: MCQTopic: JS Engine
- It improves startup time and supports JSI natively
- It replaces Babel
- It handles network requests
- It’s required for Redux
Hermes is a lightweight JS engine that compiles code ahead of time and integrates directly with JSI.
It’s optimized for React Native, providing faster startup and lower memory usage.
Correct Answer: It improves startup time and supports JSI natively
134. How does Fabric improve layout and rendering performance?
Difficulty: MediumType: SubjectiveTopic: New Architecture
Fabric uses a new layout engine that works in sync with React Fiber.
It reduces frame drops by performing layout calculations more efficiently and prioritizing visible UI updates first.
135. Can the new architecture work with the old bridge during migration?
Difficulty: MediumType: SubjectiveTopic: New Architecture
Yes, React Native supports gradual migration. Both the old bridge and new architecture can coexist during transition.
This hybrid mode helps teams adopt JSI, TurboModules, and Fabric without breaking existing modules.
136. How does the new architecture affect React Native’s threading model?
Difficulty: HardType: SubjectiveTopic: Thread Model
The new architecture introduces a unified threading model that allows JavaScript and native layers to share work more efficiently.
This means UI updates, animations, and async calls can execute with less overhead and better synchronization across threads.
137. List some benefits of migrating to the new React Native architecture.
Difficulty: MediumType: SubjectiveTopic: RN Upgrade
The new architecture improves performance, enables synchronous native access, and supports concurrent rendering.
It also simplifies native integration, reduces bridge latency, and improves developer tooling for debugging and profiling.
138. What steps are needed to enable Fabric in an existing app?
Difficulty: MediumType: SubjectiveTopic: New Architecture
First, enable newArchitectureEnabled in gradle.properties (Android) and Podfile (iOS). Then rebuild the app.
Ensure that Hermes is enabled and all third-party libraries are compatible with the new architecture before testing Fabric rendering.
139. How does the new architecture prepare React Native for future improvements?
Difficulty: MediumType: SubjectiveTopic: RN Upgrade
By unifying JavaScript and native communication under JSI, React Native becomes more flexible for future enhancements like multithreading and WebAssembly integration.
It also opens the door for new rendering techniques and faster hybrid experiences across platforms.