How to handle hardware back button android in React Native?

I get a problem to handle hardware back button android in React Native, I want to back in specific page/component when I press back button in hardware/device, but I always get error 'undefined is not an object (Evaluating 'this.props.navigation').

this is my script :

    import { Platform, StyleSheet, Text, View, BackHandler } from 'react-native';
    import { createStackNavigator, createAppContainer, NavigationActions, createBottomTabNavigator } from 'react-navigation';

    import OnBoarding from './apps/src/onBoarding/OnBoarding';
    import Welcome from './apps/src/welcome/Welcome';
    import Login from './apps/src/login/Login';

    const MainNavigator = createStackNavigator({
      OnBoarding: OnBoarding,
      Welcome: Welcome,
      Login: Login
    },{
      initialRouteName: 'OnBoarding',
      headerMode: 'none',
      navigationOptions: {
        headerVisible: false
      }
    });

    const Approot = createAppContainer(MainNavigator);
    var screen = '';

    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          routeName: ''
        }
      }

      componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
      }

      componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
      }

      handleBackButton() {
        if(screen == 'Login') {
          this.props.navigation.navigate('OnBoarding');
        }else{
          return false;
        }
      }

      getActiveRouteName(navigationState) {
        if (!navigationState) {
          return null;
        }
        const route = navigationState.routes[navigationState.index];
        // dive into nested navigators
        if (route.routes) {
          return this.getActiveRouteName(route);
        }
        return route.routeName;
      } 

      render() {
        return <Approot onNavigationStateChange={(prevState, currentState) => {
            screen = this.getActiveRouteName(currentState)
          }} />;
      }
    }

in this case, I have 3 component, they are OnBoarding, Welcome, Login, when postion in Login I want to back to OnBoarding when press hardware back button, please help me to solve this problem.

Thanks.