React Native interview Questions for freshers

React Native Interview Questions

1. What is React Native? How is it different from React?

Answer: React Native is an open-source framework developed by Facebook for building mobile applications using JavaScript and React. Unlike React, which is used for building web applications, React Native targets mobile platforms such as iOS and Android. It allows developers to write code in JavaScript and use React components that are compiled into native components, providing a near-native performance and look.

Key Differences:

• React: Used for web development.
• React Native: Used for mobile app development.
• Rendering: React uses DOM, while React Native uses native APIs.
• Components: React Native uses native components rather than web components.

2. Explain the core components of React Native.

Answer: Core components of React Native are basic building blocks similar to HTML elements but for mobile platforms:

• View: Acts as a container for other components, similar to a div in HTML.
• Text: Used for displaying text, akin to the span or p tags in HTML.
• Image: For displaying images, similar to the img tag in HTML.
• ScrollView: A scrollable container that can contain multiple views and components.
• TextInput: A component for accepting user input, similar to a input field in HTML.
• Button: Used for creating clickable buttons.

These components help developers create a user interface that feels native on both iOS and Android platforms.

3. How does React Native handle navigation?

Answer: React Native handles navigation using libraries such as React Navigation, React Native Navigation, and React Router Native. The most commonly used is React Navigation, which provides a variety of navigators like stack, tab, and drawer navigators.

• Stack Navigator: Allows users to navigate through a stack of screens.
• Tab Navigator: Provides navigation through tabs, often at the bottom of the screen.
• Drawer Navigator: Used for sidebar navigation, often hidden by default.

Navigation in React Native is similar to web navigation but adapted for mobile, with smooth transitions and gestures.

4. What is Flexbox and its importance in React Native?

Answer: Flexbox is a layout model used for creating responsive and adaptive layouts in React Native. It is a CSS module that provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown.

Key Properties:

• flexDirection: Defines the primary axis direction (row, column).
• justifyContent: Aligns children along the primary axis (flex-start, center, space-between).
• alignItems: Aligns children along the secondary axis (flex-start, center, stretch).
• flex: Defines how a component should grow relative to its siblings.

Flexbox is essential in React Native as it handles screen sizes and orientations dynamically, making it easier to build responsive designs.

5. What are the lifecycle methods of React Native components?

Answer: Lifecycle methods in React Native are similar to those in React and are used to control the behavior of components throughout their existence.

Important Lifecycle Methods:

• Mounting:
  • constructor(): Initializes the state and binds event handlers.
  • componentDidMount(): Invoked once the component is inserted into the DOM; used for API calls or setting up subscriptions.
• Updating:
  • shouldComponentUpdate(): Determines whether the component should re-render.
  • componentDidUpdate(): Called after the component updates; useful for DOM operations.
• Unmounting:
  • componentWillUnmount(): Called right before the component is removed; used for cleanup (e.g., removing event listeners).

Understanding lifecycle methods is crucial for optimizing performance and managing side effects in React Native applications.

6. What are Hooks in React Native, and why are they used?

Answer: Hooks are functions introduced in React 16.8 that allow you to use state and other React features in functional components without writing a class.

Common Hooks:

• useState: Allows you to add state to functional components.
• useEffect: This lets you perform side effects in functional components, similar to lifecycle methods.
• useContext: Allows you to use the React context API in functional components.
• useRef: Provides a way to access and interact with DOM elements directly.

Hooks simplify the component logic and reduce the need for classes, making the code more readable and easier to manage.

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

Answer: State management in React Native can be handled through several approaches, including:

• Local State: Managed using useState or useReducer within individual components.
• Context API: Provides a way to pass data through the component tree without manually passing props.
• Redux: A popular library for managing global state, providing a single source of truth and predictable state updates through actions and reducers.
• MobX: Another state management library focusing on observables and reactive programming.

The choice of state management depends on the complexity of the app. For simple apps, useState and Context API are sufficient, while Redux or MobX may be necessary for larger, more complex applications.

8. How do you optimize the performance of a React Native application?

Answer: Performance optimization in React Native can be achieved through several techniques:

• Avoid Re-renders: Use shouldComponentUpdate, React.memo, and useCallback to prevent unnecessary re-renders.
• Use FlatList: For rendering large lists efficiently, as it renders only visible items and manages memory effectively.
• Optimize Images: Use smaller image sizes and leverage caching techniques.
• Minimize JavaScript Threads: Keep JavaScript thread light by avoiding heavy computations or animations in it.
• Lazy Loading: Load components or data only when needed.

Properly managing performance ensures a smooth user experience, especially on lower-end devices.

9. Explain the concept of bridging in React Native.

Answer: Bridging is a technique used in React Native to enable communication between JavaScript code and native modules (iOS/Android). This allows developers to use platform-specific functionalities that are not available in React Native's JavaScript codebase.

Steps for Bridging:

• JavaScript Side: Call the native module using the NativeModules API.
• Native Side: Create a native module in the platform-specific language (Objective-C/Swift for iOS, Java/Kotlin for Android) and expose methods to JavaScript.

Bridging is crucial for leveraging native device features like camera, Bluetooth, or custom UI components that are not supported by default in React Native.

10. What are the best practices for structuring a React Native project?

Answer: Structuring a React Native project well helps in maintaining and scaling the application easily:

• Folder Structure: Organize code into meaningful directories like components, screens, navigation, services, and assets.
• Component Reusability: Build reusable components to avoid code duplication.
• Use Constants and Utils: Keep constants (like colors, dimensions) and utility functions in separate files.
• Separation of Concerns: Separate logic from UI by using custom hooks or services.
• State Management: Use a consistent approach for state management across the app.
• Linting and Formatting: Use tools like ESLint and Prettier for consistent coding standards.
• Testing: Include unit tests, integration tests, and end-to-end tests using tools like Jest and Detox.

Kishore has experience of over 12+ years in the field of React training courses with end-to-end practical knowledge.