React-native-router-flux: App can't exit

[ShawSmall]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0 (v3 is not supported)
• react-native v0.49.3

class Example extends Component {
constructor(props) {
super(props);
this.state = {
isFirstIn: false,
isLoading: true
}
}
componentWillMount(){
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
this.setState({
isLoading: false,
isFirstIn: false
});
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = () => {
// PublicToast.showMessage('_onExitApp'); // 在不传 backAndroidHandler 有 onExitApp 时调用
this._exit();
}
// 退出程序
_exit = () => {
// 当前页面为root页面时的处理
if (this.lastBackPressed && (this.lastBackPressed + 2000 >= Date.now())) {
//最近2秒内按过back键，可以退出应用。
//alert 亲，你真的要离开我吗
BackHandler.exitApp();
return true;
}
this.lastBackPressed = Date.now();
alert('再按一次退出应用');
return true;
};

render() {
if (this.state.isLoading == true) {
return (


)
} else {
return (
createReducer={reducerCreate}
getSceneStyle={getSceneStyle}
>

hideNavBar
transitionConfig={() => ({screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid})}
>

hideNavBar
key="root"
titleStyle={{alignSelf: 'center'}}
>

              <Stack key="customNavBar" hideTabBar titleStyle={{alignSelf: 'center'}}>
                <Scene
                  key="customNavBar1"
                  title="CustomNavBar 1"
                  navBar={CustomNavBar}
                  component={CustomNavBarView}
                  back
                />
                <Scene
                  key="customNavBar2"
                  title="CustomNavBar 2"
                  navBar={CustomNavBar}
                  component={CustomNavBarView}
                  back
                />
                <Scene
                  key="customNavBar3"
                  title="Another CustomNavBar"
                  navBar={CustomNavBar2}
                  component={CustomNavBarView}
                  back
                />
                <Scene
                  key="hiddenNavBar"
                  title="hiddenNavBar"
                  component={CustomNavBarView}
                  hideNavBar={true}
                  back
                />
              </Stack>

              <Stack
                back
                backTitle="Back"
                key="register"
                duration={0}
              >
                <Scene key="_register" component={Register} title="Register"/>
                <Scene key="register2" component={Register} title="Register2"/>
                <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE}/>
              </Stack>

              <Drawer
                hideNavBar
                key="drawer"
                contentComponent={DrawerContent}
                drawerImage={MenuIcon}
                drawerWidth={300}
              >
                {/*
            Wrapper Scene needed to fix a bug where the tabs would
            reload as a modal ontop of itself
          */}
                <Scene hideNavBar>
                  <Tabs
                    key="tabbar"
                    swipeEnabled
                    showLabel={true}
                    tabBarStyle={styles.tabBarStyle}
                    activeBackgroundColor="white"
                    inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
                    tabBarPosition='bottom'
                  >
                    <Stack
                      key="tab_1"
                      title="Tab #1"
                      tabBarLabel="TAB #1"
                      inactiveBackgroundColor="#FFF"
                      activeBackgroundColor="#DDD"
                      icon={TabIcon}
                      navigationBarStyle={{backgroundColor: 'green'}}
                      titleStyle={{color: 'white', alignSelf: 'center'}}
                    >
                      <Scene
                        key="tab1_1"
                        component={TabView}
                        title="Tab #1_1"
                        onRight={() => alert('Right button')}
                        rightTitle="Right"

                      />

                      <Scene
                        key="tab1_2"
                        component={TabView}
                        title="Tab #1_2"
                        back
                        titleStyle={{color: 'black', alignSelf: 'center'}}
                      />
                    </Stack>

                    <Stack
                      key="tab_2"
                      title="Tab #2"
                      icon={TabIcon}
                      initial
                    >
                      <Scene
                        key="tab_2_1"
                        component={TabView}
                        title="Tab #2_1"
                        renderRightButton={() => <Text>Right</Text>}
                      />
                      <Scene
                        key="tab_2_2"
                        component={TabView}
                        title="Tab #2_2"
                        onBack={() => alert('onBack button!')}
                        hideDrawerButton
                        backTitle="Back!"
                        panHandlers={null}
                      />
                    </Stack>

                    <Stack key="tab_3">
                      <Scene
                        key="tab_3_1"
                        component={TabView}
                        title="Tab #3"
                        icon={TabIcon}
                        rightTitle="Right3"
                        onRight={() => {
                        }}
                      />
                    </Stack>
                    <Stack key="tab_4">
                      <Scene key="tab_4_1" component={TabView} title="Tab #4" hideNavBar icon={TabIcon}/>
                    </Stack>
                    <Stack key="tab_5">
                      <Scene key="tab_5_1" component={TabView} title="Tab #5" icon={TabIcon}/>
                    </Stack>
                  </Tabs>
                </Scene>
              </Drawer>
            </Stack>
            <Scene key="demo_lightbox" component={DemoLightbox}/>
          </Lightbox>
          <Scene key="error" component={ErrorModal}/>
          <Stack key="login" titleStyle={{alignSelf: 'center'}}>
            <Scene
              key="loginModal"
              component={Login}
              title="Login"
              onExit={() => console.log('onExit')}
              leftTitle="Cancel"
              onLeft={Actions.pop}
            />
            <Scene
              key="loginModal2"
              component={Login2}
              title="Login2"
              backTitle="Back"
              panHandlers={null}
              duration={1}
            />
            <Scene
              key="loginModal3"
              hideNavBar
              component={Login3}
              title="Login3"
              panHandlers={null}
              duration={1}
            />
          </Stack>
        </Modal>
        <Scene component={MessageBar}/>
      </Overlay>
    </Router>
  )
}

}
}

[onrige]

What kind of problems do you have? It's not clear only after reading post title and looking to your code.

[daviscabral]

Please, try to wrap your full code for better reading.

But from what I am getting - this might be an issue with react-navigation (exiting or not exiting from initial screen when on Android). Is that the issue?

[ShawSmall]

yes,i have the issue.

[sitompul]

I have the same issue, here is my router

const ConnectRouter = connect()(Router);

const Routes = () => (
  <ConnectRouter>
    <Stack key="root">
      <Scene key="launchScreen" component={LoadingFull} hideNavBar />
      <Scene key="login" component={LoginForm} hideNavBar type={ActionConst.RESET} />
      <Scene key="lostPassword" component={LostPasswordForm} hideNavBar />
      <Scene key="dashboard" component={Dashboard} hideNavBar type={ActionConst.RESET} />
      <Scene key="search" component={SearchResult} hideNavBar />
      <Scene key="detail" component={detail} hideNavBar />
      <Scene key="notifications" component={Notifications} hideNavBar />
      <Scene key="errorResult" component={ErrorResult} type={ActionConst.RESET} hideNavBar />
    </Stack>
  </ConnectRouter>
);

When i'm at my reset scenes, nothing happened when i touch the physical android button, but when im at my normal scenes, the app will exit if i press the physical back button.
im using version 4.0.0-beta.24.

[nishiltamboli]

@sitompul I have the exact same issue! Did you find a fix for this? I am planning to use an older version instead but I dont intend to do that. I like the platform specific overrides of Screen to Screen nav animation! And what version of RN are you using? Mine is 0.50.4. Also my RNRF version is the same as yours.

[rajeshbatth-gommt]

Any update on this issue?? Even I'm getting this on 4.0.0-beta.24

[sitompul]

@rajeshbatth-gommt @nishiltamboli look for @Blapi 's comment at #2737

[aksonov]

Please check Example project - I checked hardware back and it works fine.

[ShawSmall]

i have solved the problem;
_backAndroidHandler = () => {
const scene = Actions.currentScene;
// alert(scene)
if (scene === 'index' || scene === '_Main' || scene === 'Main') {
BackHandler.exitApp();
return true;
}
Actions.pop();
return true;
};
getSceneStyle={getSceneStyle}
uriPrefix={prefix}
backAndroidHandler={this._backAndroidHandler}>