25 React Native Interview Questions and Answers

React Native has emerged as a leading framework for building mobile applications. Leveraging the power of JavaScript and React, it allows developers to create natively-rendered mobile apps for both iOS and Android using a single codebase. This efficiency, combined with a strong community and extensive library support, makes React Native a popular choice for companies aiming to streamline their development process and reduce costs.

This article offers a curated selection of interview questions designed to test your knowledge and problem-solving abilities with React Native. By working through these questions, you will gain a deeper understanding of the framework and be better prepared to demonstrate your expertise in a technical interview setting.

React Native Interview Questions and Answers

1. Explain how to handle state management in a React Native application.

State management in a React Native application can be handled in several ways, depending on the complexity and requirements of the application. The primary methods include:

• Local State: Managed within individual components using the useState hook. This is suitable for simple applications or components with isolated state requirements.
• Context API: Provides a way to pass data through the component tree without having to pass props down manually at every level. It is useful for managing global state in medium-sized applications.
• Redux: A popular state management library that provides a centralized store for the entire application state. It is suitable for large applications with complex state interactions.
• MobX: Another state management library that uses observables to track state changes. It is known for its simplicity and ease of use.

Here is a brief example of using the Context API for state management:

import React, { createContext, useState, useContext } from 'react';

// Create a Context
const AppContext = createContext();

// Create a provider component
const AppProvider = ({ children }) => {
  const [state, setState] = useState({ user: null });

  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  );
};

// Custom hook to use the AppContext
const useAppContext = () => {
  return useContext(AppContext);
};

// Example component using the custom hook
const UserProfile = () => {
  const { state, setState } = useAppContext();

  return (
    <div>
      <p>User: {state.user}</p>
      <button onClick={() => setState({ user: 'John Doe' })}>Set User</button>
    </div>
  );
};

// Main App component
const App = () => (
  <AppProvider>
    <UserProfile />
  </AppProvider>
);

export default App;

2. How would you optimize performance in a React Native app?

Optimizing performance in a React Native app involves several strategies and best practices. Here are some key techniques:

• Use PureComponent and Memo: These can help prevent unnecessary re-renders by performing a shallow comparison of props and state.
• Optimize Images: Use appropriate image formats and sizes. Consider using libraries like react-native-fast-image for better performance.
• Reduce the Number of Components: Minimize the number of components rendered on the screen to reduce the rendering workload.
• Use FlatList and SectionList: For rendering large lists, use these instead of ScrollView to take advantage of their performance optimizations.
• Minimize State Updates: Keep the state as minimal as possible and avoid frequent updates to improve rendering performance.
• Use InteractionManager: Defer non-urgent tasks using InteractionManager to ensure smooth animations and interactions.

Example of using React.memo to optimize performance:

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

const MyComponent = ({ text }) => {
  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

export default memo(MyComponent);

3. Explain how to navigate between screens using React Navigation.

React Navigation is a widely-used library in React Native for handling navigation between different screens. It provides a simple and flexible API to create various types of navigators, such as stack, tab, and drawer navigators. The most common type is the stack navigator, which allows users to navigate between screens in a stack-like fashion.

To use React Navigation, you need to install the necessary packages and set up a basic navigation structure. Here is a concise example to demonstrate how to navigate between screens using a stack navigator:

// Install the required packages
// npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

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

const Stack = createStackNavigator();

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

function DetailsScreen() {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}

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

4. How do you handle asynchronous operations in React Native?

In React Native, asynchronous operations are typically handled using Promises and the async/await syntax. These tools allow you to write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain.

Here is a simple example of how to handle an asynchronous operation using async/await:

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

const FetchDataComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default FetchDataComponent;

5. Write a function to fetch data from an API and display it in a FlatList.

To fetch data from an API and display it in a FlatList in React Native, you can use the fetch function to make the API call and manage the state to store the fetched data. Here is a concise example:

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

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

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

export default App;

6. Describe how to use hooks in functional components.

Hooks in React Native are functions that let you “hook into” React state and lifecycle features from function components. The most commonly used hooks are useState and useEffect.

• The useState hook allows you to add state to a functional component.
• The useEffect hook lets you perform side effects in function components, such as data fetching or subscriptions.

Example:

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

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

  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me" />
    </View>
  );
};

export default Counter;

In this example, useState initializes the count state variable to 0 and provides a function setCount to update it. useEffect logs a message to the console every time the count changes.

7. How would you implement push notifications in a React Native app?

To implement push notifications in a React Native app, you typically use third-party services such as Firebase Cloud Messaging (FCM) or OneSignal. These services handle the delivery of notifications to both iOS and Android devices, simplifying the process.

First, you need to set up the chosen service in your project. For Firebase, this involves creating a Firebase project, adding your app to the project, and configuring the necessary settings. You will also need to install the relevant libraries in your React Native project.

Example using Firebase Cloud Messaging:

// Install the necessary libraries
// npm install @react-native-firebase/app @react-native-firebase/messaging

import messaging from '@react-native-firebase/messaging';

// Request user permission for notifications
async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
}

// Handle incoming messages
messaging().onMessage(async remoteMessage => {
  console.log('A new FCM message arrived!', JSON.stringify(remoteMessage));
});

// Call the function to request permission
requestUserPermission();

8. How do you handle forms and user input in React Native?

In React Native, handling forms and user input involves managing state and handling events. The primary components used for this purpose are TextInput for capturing user input and Button for submitting the form. State management is typically handled using the useState hook.

Example:

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

const FormExample = () => {
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
  };

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={text => setName(text)}
      />
      <Button title="Submit" onPress={handleSubmit} />
      {submitted && <Text>You submitted: {name}</Text>}
    </View>
  );
};

export default FormExample;

In this example, the TextInput component captures user input and updates the state using the onChangeText event handler. The Button component triggers the handleSubmit function, which sets the submitted state to true, displaying the submitted name.

9. Write a custom hook to manage form state.

Custom hooks in React Native allow you to extract and reuse stateful logic across multiple components. They are a powerful feature that can help manage complex state logic, such as form state, in a clean and reusable manner.

Here is an example of a custom hook to manage form state:

import { useState } from 'react';

const useForm = (initialState) => {
    const [formState, setFormState] = useState(initialState);

    const handleChange = (name, value) => {
        setFormState({
            ...formState,
            [name]: value
        });
    };

    const resetForm = () => {
        setFormState(initialState);
    };

    return [formState, handleChange, resetForm];
};

export default useForm;

Usage in a component:

import React from 'react';
import { TextInput, Button, View } from 'react-native';
import useForm from './useForm';

const MyForm = () => {
    const [formState, handleChange, resetForm] = useForm({ name: '', email: '' });

    return (
        <View>
            <TextInput
                placeholder="Name"
                value={formState.name}
                onChangeText={(text) => handleChange('name', text)}
            />
            <TextInput
                placeholder="Email"
                value={formState.email}
                onChangeText={(text) => handleChange('email', text)}
            />
            <Button title="Reset" onPress={resetForm} />
        </View>
    );
};

export default MyForm;

10. How do you implement animations in React Native?

In React Native, animations can be implemented using several methods, with the most common being the Animated API and the LayoutAnimation API. The Animated API provides a powerful and flexible way to create complex animations, while the LayoutAnimation API is useful for animating layout changes.

The Animated API allows you to create animations by defining animated values and configuring them with different types of animations, such as timing, spring, and decay. You can then interpolate these values to create smooth transitions.

Example:

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

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

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

  return (
    <View>
      <Animated.View style={{ opacity: fadeAnim }}>
        <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      </Animated.View>
      <Button title="Fade In" onPress={fadeIn} />
    </View>
  );
};

export default FadeInView;

In this example, an animated value is created using useRef and Animated.Value. The fadeIn function uses Animated.timing to animate the opacity of the view from 0 to 1 over a duration of 1000 milliseconds.

The LayoutAnimation API is another way to handle animations, particularly for layout changes. It allows you to animate the layout update process without having to manually define the animations.

Example:

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

const LayoutAnimationExample = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded(!expanded);
  };

  return (
    <View>
      <View style={{ height: expanded ? 200 : 100, backgroundColor: 'red' }} />
      <Button title="Toggle Expand" onPress={toggleExpand} />
    </View>
  );
};

export default LayoutAnimationExample;

In this example, the LayoutAnimation.configureNext method is used to animate the height change of a view when the button is pressed.

11. Describe how to use TypeScript with React Native.

TypeScript is a statically typed superset of JavaScript that can be used to enhance the development experience in React Native by providing type safety and better tooling support. Using TypeScript with React Native involves setting up the TypeScript compiler, configuring the project, and writing components with type annotations.

To start using TypeScript in a React Native project, you need to install TypeScript and the necessary type definitions. This can be done using npm or yarn:

npm install --save-dev typescript @types/react @types/react-native

Next, create a tsconfig.json file to configure the TypeScript compiler:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

With the setup complete, you can start writing React Native components in TypeScript. Here is a simple example of a functional component with type annotations:

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

interface Props {
  title: string;
  subtitle?: string;
}

const MyComponent: React.FC<Props> = ({ title, subtitle }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 16,
    color: 'gray',
  },
});

export default MyComponent;

In this example, the Props interface defines the types for the component’s props, ensuring that title is a required string and subtitle is an optional string. The MyComponent functional component uses these types to provide type safety and better development experience.

12. How do you handle deep linking in a React Native app?

Deep linking in a React Native app can be handled using the Linking module provided by React Native. This module allows you to listen for incoming links and handle them appropriately within your app. Additionally, you can use libraries like react-navigation to simplify the process of navigating to specific screens based on the URL.

Example:

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

const Stack = createStackNavigator();

function App() {
  useEffect(() => {
    const handleDeepLink = (event) => {
      const url = event.url;
      // Parse the URL and navigate to the appropriate screen
    };

    Linking.addEventListener('url', handleDeepLink);

    return () => {
      Linking.removeEventListener('url', handleDeepLink);
    };
  }, []);

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

13. Explain how to use context API for global state management.

The Context API in React Native is a feature for managing global state without the need for third-party libraries like Redux. It allows you to create a context, which can then be provided to and consumed by any component in your application.

To use the Context API for global state management, follow these steps:

• Create a context using React.createContext().
• Create a provider component that uses the context’s Provider to pass down the state and any functions to modify it.
• Consume the context in child components using the context’s Consumer or the useContext hook.

Example:

import React, { createContext, useState, useContext } from 'react';

// Create a context
const GlobalStateContext = createContext();

// Create a provider component
const GlobalStateProvider = ({ children }) => {
  const [state, setState] = useState({ user: null });

  return (
    <GlobalStateContext.Provider value={{ state, setState }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

// Custom hook to use the global state
const useGlobalState = () => {
  return useContext(GlobalStateContext);
};

// Example of a component consuming the global state
const UserProfile = () => {
  const { state } = useGlobalState();
  return <div>User: {state.user ? state.user.name : 'Guest'}</div>;
};

// App component
const App = () => (
  <GlobalStateProvider>
    <UserProfile />
  </GlobalStateProvider>
);

export default App;

14. Write a function to cache API responses locally.

Caching API responses locally in React Native can improve the performance and user experience of your application. By storing the responses from API calls in local storage, you can reduce the number of network requests, which is particularly useful in scenarios with limited or unreliable internet connectivity.

Here is a concise example of how to implement caching using AsyncStorage in React Native:

import AsyncStorage from '@react-native-async-storage/async-storage';

const fetchWithCache = async (url) => {
  try {
    const cacheKey = `cache_${url}`;
    const cachedResponse = await AsyncStorage.getItem(cacheKey);

    if (cachedResponse) {
      return JSON.parse(cachedResponse);
    }

    const response = await fetch(url);
    const data = await response.json();

    await AsyncStorage.setItem(cacheKey, JSON.stringify(data));

    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

// Usage
fetchWithCache('https://api.example.com/data')
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

15. Describe how to integrate native modules in a React Native app.

Native modules in React Native allow you to write custom native code for iOS and Android, which can be invoked from JavaScript. This is useful for accessing platform-specific APIs or optimizing performance for certain tasks that are not efficiently handled by JavaScript alone.

To integrate a native module, you typically follow these steps:

• Create a native module in the respective platform’s language (Objective-C/Swift for iOS and Java/Kotlin for Android).
• Expose the native module to JavaScript.
• Use the native module in your React Native code.

Here is a concise example to illustrate the process:

For iOS (Objective-C):

objective-c // MyModule.h #import <React/RCTBridgeModule.h> @interface MyModule : NSObject <RCTBridgeModule> @end // MyModule.m #import "MyModule.h" @implementation MyModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(showMessage:(NSString *)message) { UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Alert" message:message preferredStyle:UIAlertControllerStyleAlert]; UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil]; [alert addAction:ok]; UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController; [rootViewController presentViewController:alert animated:YES completion:nil]; } @end <pre>{{EJS92}}</pre> To use the native module in your React Native code: <pre>{{EJS93}}</pre> <h4>16. How do you implement internationalization (i18n) in a React Native app?</h4> Internationalization (i18n) in a React Native app involves adapting the app to support multiple languages and regions without requiring changes to the codebase. One of the most popular libraries for implementing i18n in React Native is -i18next. To implement i18n in a React Native app, follow these steps: <ul> <li>Install the necessary libraries: <pre>{{EJS94}}</pre> Then, you can create a function to handle the file upload: <pre>{{EJS95}}</pre> <h4>18. How do you secure sensitive information in a React Native app?</h4> Securing sensitive information in a React Native app involves several best practices and techniques to ensure that data such as API keys, user credentials, and other confidential information are protected from unauthorized access. <ul> <li><b>Secure Storage:</b> Use secure storage solutions like -native-keychain or -native-sensitive-info to store sensitive data. These libraries provide a secure way to store and retrieve sensitive information.</li> <li><b>Environment Variables:</b> Store sensitive information in environment variables using libraries like -native-config. This helps to keep sensitive data out of your source code and version control.</li> <li><b>Encryption:</b> Encrypt sensitive data before storing it or transmitting it over the network. Use libraries like -js to implement encryption in your React Native app.</li> <li><b>HTTPS:</b> Always use HTTPS for network communication to ensure that data transmitted between the client and server is encrypted.</li> <li><b>Code Obfuscation:</b> Use tools like ProGuard (for Android) and Obfuscator-LLVM (for iOS) to obfuscate your code, making it harder for attackers to reverse-engineer your app and access sensitive information.</li> <li><b>Token Management:</b> Use short-lived tokens and refresh tokens for authentication. This minimizes the risk of token theft and misuse.</li> <li><b>Regular Audits:</b> Regularly audit your code and dependencies for security vulnerabilities. Use tools like audit to identify and fix security issues in your dependencies.</li> </ul> <h4>19. Explain how to use WebSockets for real-time communication.</h4> WebSockets provide a full-duplex communication channel over a single, long-lived connection, which is ideal for real-time communication. In React Native, WebSockets can be used to enable real-time features such as live chat, notifications, and updates. To use WebSockets in React Native, you can utilize the built-in WebSocket API. Here is a concise example to demonstrate the basic implementation: <pre>{{EJS96}}</pre> In this example, a WebSocket connection is established to a server. The <b>onopen</b> event is triggered when the connection is successfully opened, allowing you to send a message to the server. The <b>onmessage</b> event handles incoming messages from the server, updating the state accordingly. The <b>onclose</b> and <b>onerror</b> events handle connection closure and errors, respectively. <h4>20. How do you implement offline support in a React Native app?</h4> Implementing offline support in a React Native app involves several strategies to ensure that the app remains functional even when there is no internet connection. Key aspects include data storage, network request handling, and user experience management. <ul> <li> <b>Data Storage:</b> Use local storage solutions like AsyncStorage, SQLite, or Realm to store data locally on the device. This allows the app to access and display data even when offline. </li> <li> <b>Network Request Handling:</b> Implement a mechanism to queue network requests when offline and replay them once the connection is restored. Libraries like Redux Offline or custom middleware can be used for this purpose. </li> <li> <b>User Experience Management:</b> Provide feedback to users about their offline status and ensure that the app gracefully handles the transition between online and offline states. </li> </ul> Example: <pre>{{EJS97}}</pre> <h4>21. Write a function to handle background tasks in a React Native app.</h4> Handling background tasks in a React Native app is crucial for performing operations like fetching data, updating location, or processing notifications without interrupting the user experience. React Native does not natively support background tasks, so we typically use third-party libraries such as -native-background-task or -native-background-fetch. Here is an example using -native-background-task: <pre>{{EJS98}}</pre> <h4>22. How do you debug a React Native app effectively?</h4> Debugging a React Native app effectively involves using a combination of built-in tools, third-party libraries, and best practices. Here are some key methods: <b>1. Built-in Debugging Tools:</b> React Native comes with several built-in tools that can be accessed through the developer menu. These include: <ul> <li><i>Remote Debugging:</i> This allows you to use Chrome DevTools to debug your JavaScript code. You can set breakpoints, inspect variables, and view console logs.</li> <li><i>React Developer Tools:</i> This tool helps you inspect the React component hierarchy, view props and state, and understand the component structure.</li> <li><i>Hot Reloading:</i> This feature allows you to see changes in real-time without losing the application state, making it easier to debug UI issues.</li> </ul> <b>2. Third-Party Libraries:</b> Several third-party libraries can enhance your debugging experience: <ul> <li><i>Redux DevTools:</i> If you are using Redux for state management, Redux DevTools can help you inspect actions, state changes, and time-travel debug your application.</li> <li><i>Reactotron:</i> This is a desktop app for inspecting React and React Native apps. It provides features like API request tracking, state changes, and performance monitoring.</li> </ul> <b>3. Best Practices:</b> Adopting best practices can also make debugging more effective: <ul> <li><i>Consistent Logging:</i> Use console.log statements judiciously to track the flow of your application and identify issues.</li> <li><i>Error Boundaries:</i> Implement error boundaries in your React components to catch and handle errors gracefully.</li> <li><i>Unit and Integration Testing:</i> Write tests to catch issues early in the development process, reducing the need for extensive debugging later.</li> </ul> <h4>23. Explain how to use GraphQL with React Native.</h4> GraphQL is a query language for APIs that allows clients to request exactly the data they need. When using GraphQL with React Native, it provides a more efficient and flexible way to manage data fetching compared to traditional REST APIs. To use GraphQL with React Native, you typically use the Apollo Client, which is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. First, you need to install the necessary libraries: <pre>{{EJS99}}</pre> Next, you set up the Apollo Client in your React Native application: <pre>{{EJS100}}</pre> In your component, you can then use the hook to fetch data: <pre>{{EJS101}}</pre> <h4>24. Describe the significance of Flexbox in layout design.</h4> Flexbox is a layout model that allows elements within a container to be automatically arranged based on certain properties. In React Native, Flexbox is used to create responsive and adaptive layouts that work across different screen sizes and orientations. The primary properties of Flexbox include , , , and . <ul> <li><b>flexDirection</b>: Determines the direction of the main axis (row or column).</li> <li><b>justifyContent</b>: Aligns children along the main axis.</li> <li><b>alignItems</b>: Aligns children along the cross axis.</li> <li><b>flex</b>: Defines how a component should grow relative to its siblings.</li> </ul> Example: <pre>{{EJS102}}</pre> <h4>25. Write a function to implement biometric authentication.</h4> Biometric authentication in React Native can be implemented using libraries such as -native-touch-id or -native-fingerprint-scanner. These libraries provide a simple interface to access the device's biometric authentication capabilities, such as fingerprint or facial recognition. Here is an example using -native-touch-id`:

import React from 'react';
import { View, Button, Alert } from 'react-native';
import TouchID from 'react-native-touch-id';

const BiometricAuth = () => {
  const authenticate = () => {
    TouchID.authenticate('Authenticate with Biometrics')
      .then(success => {
        Alert.alert('Authenticated Successfully');
      })
      .catch(error => {
        Alert.alert('Authentication Failed');
      });
  };

  return (
    <View>
      <Button title="Authenticate" onPress={authenticate} />
    </View>
  );
};

export default BiometricAuth;