title: How to handle exit app in one screen not in the whole app - React Native?
body: <p>I have some issue with <strong>BackHandler</strong>, the issue is</p>
  
  <p>when running the app and go to the let's say Sign Up screen and touch the back in my mobile they will run the function and show the Alert to confirm, but now when I go to any other screen and touch the back they will I need to just back to the previous screen on every back BackHandler.exitApp(); runs, Although I write if the routname is SignUp just exit the app not other screens</p>
  
  <p>this is my code</p>
  
  <h3>Sign Up</h3>
  
  <pre><code>    import React from "react";
      import {
        Text,
        TextInput,
        ActivityIndicator,
        View,
        KeyboardAvoidingView,
        ScrollView,
        Image,
        TouchableOpacity,
        BackHandler,
        Alert
      } from "react-native";
      export default class signUp extends React.Component {
        constructor(props) {
          super(props);
  
        }
  
        componentDidMount() {
          BackHandler.addEventListener("hardwareBackPress", this.backPressed);
        }
  
        componentWillUnmount() {
          BackHandler.removeEventListener("hardwareBackPress", this.backPressed);
        }
        backPressed = () =&gt; {
      let { routeName } = this.props.navigation.state;
      console.log("route is :  " + routeName);
  
      if (routeName == "SignUp") {
        console.log("ROUTE :  " + routeName);
        Alert.alert(
          "Exit App",
          "Do you want to exit?",
          [
            {
              text: "No",
              onPress: () =&gt; console.log("Cancel Pressed"),
              style: "cancel"
            },
            { text: "Yes", onPress: () =&gt; BackHandler.exitApp() }
          ],
          { cancelable: false }
        );
        return true;
      } else {
        return false;
      }
    };
  
        render() {....}
      }
  </code></pre>
  
  <h3>Routes</h3>
  
  <pre><code>import { createStackNavigator, createAppContainer } from "react-navigation";
  import React from "react";
  import { View } from "react-native";
  import Splash from "../screens/Splash";
  import Home from "../screens/Home";
  import SignUp from "../screens/SignUp";
  import SignIn from "../screens/SignIn";
  import ForgetPassword from "../screens/ForgetPassword";
  
  const Routes = createStackNavigator(
    {
      Splash: {
        screen: Splash,
        navigationOptions: {
          header: null
        }
      },
      SignUp: {
        screen: SignUp,
        navigationOptions: () =&gt; ({
          // header: null
          title: "Sign Up",
          headerLeft: null,
          headerTintColor: "#fc0301",
          headerStyle: {
            borderBottomColor: "white"
          },
          headerTitleStyle: {
            color: "#fc0301",
            textAlign: "center",
            flex: 1,
            elevation: 0,
            fontSize: 25,
            justifyContent: "center"
          }
        })
      },
      SignIn: {
        screen: SignIn,
        navigationOptions: {
          title: "Sign In",
          headerRight: &lt;View /&gt;,
          headerTintColor: "#fc0301",
          headerStyle: {
            borderBottomColor: "white"
          },
          headerTitleStyle: {
            color: "#fc0301",
            textAlign: "center",
            flex: 1,
            elevation: 0,
            fontSize: 25,
            justifyContent: "center"
          }
        }
      },
      ForgetPassword: {
        screen: ForgetPassword,
        navigationOptions: {
          header: null
        }
      },
      Home: {
        screen: Home,
        navigationOptions: {
          header: null
        }
      }
    },
    {
      initialRouteName: "Splash"
    }
  );
  
  export default createAppContainer(Routes);
  </code></pre>