Question 32731 in React native Question posted in
The official React Native documentation can be found here.

React native mobile back button should exit app only for first screen

I was trying to handle mobile back button should exit the app only when user is on first screen, and should be go back to prev screen if its on other screen.

I tried react native backHandler only on first screen but its getting applied for all the screen. I want to exit the app if its the first screen

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the solution

    import the hooks

    import { useFocusEffect, useRoute } from '@react-navigation/native';

    we can use the useRoute hook by @react-navigation/native to get the route name

      const route = useRoute();

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        if (route.name === 'HomeScreen') {
          Alert.alert('Hold on!', 'Are you sure you want to go back?', [
          {
            text: 'Cancel',
            onPress: () => null,
            style: 'cancel',
          },
          {text: 'YES', onPress: () => BackHandler.exitApp()},
        ]);
          return true;
        } else {
          return false;
        }
      };

      const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () => subscription.remove();
    }, [])
  );

  2. 0

    You can achieve this by using the useEffect hook in your first screen component to set up a listener for the back button press event using the BackHandler API from React Native. Then, in the event handler, you can check if the current screen is the first screen and call the exitApp method from the BackHandler API to exit the app.

    Here’s some example code to achieve this:

    import React, { useEffect } from 'react';
import { BackHandler } from 'react-native';

const FirstScreen = () => {
  useEffect(() => {
    const backAction = () => {
      if (isFirstScreen()) {
        BackHandler.exitApp();
        return true;
      } else {
        return false;
      }
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

    return () => backHandler.remove();
  }, []);

  const isFirstScreen = () => {
    // Logic to determine if current screen is the first screen
    // Return true if it is, false otherwise
  };

  return (
    // Your first screen component code
  );
};

export default FirstScreen;

    In the useEffect hook, we set up a listener for the hardwareBackPress event using the BackHandler.addEventListener method. The event handler, backAction, checks if the current screen is the first screen using the isFirstScreen function. If it is, it calls the BackHandler.exitApp method to exit the app, otherwise it returns false to allow the default back button behavior to occur. Finally, in the cleanup function returned from the useEffect hook, we remove the listener using the backHandler.remove method to avoid any memory leaks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search