Closed whyaftab closed 6 years ago
hello everyone i am new in react-native and stuck at android hardware back button integration in https://reactnavigation.org/docs/en/redux-integration.html#handling-the-hardware-back-button-in-android i am getting error of undefined is not an object (evaluating 'state.routes') below is my code
` const AppStack = createStackNavigator({ mainScreen: { screen: MainScreen, navigationOptions: ({ navigation }) => ({ header: }) }, userProfile: { screen: UserProfile, navigationOptions: ({ navigation }) => ({ headerTitle: 'Profile', headerTitleStyle: { flex: 1, textAlign: 'center', alignSelf: 'center' }, headerRight: (<View style={{ paddingRight: 15 }} > <Icon onPress={() => navigation.navigate('EditUserProfile')} name="edit" /> ) }) }, editUserProfile: { screen: EditUserProfile,
navigationOptions: ({ navigation }) => ({ headerTitle: 'Edit Profile', headerTitleStyle: { flex: 1, textAlign: 'center', alignSelf: 'center' }, headerRight: (<View style={{ paddingRight: 15 }} > <Icon onPress={() => navigation.navigate('logout')} name="exit-to-app" /> </View>) })
}, PrivateChat: { screen: PrivateChat, } }, logout: { screen: Logout } }, { initialRouteName: 'mainScreen', });
const AuthStack = createStackNavigator({ auth: { screen: Form, navigationOptions: { header: null } } });
const SwitchNavigator = createSwitchNavigator( { AuthLoading: AuthLoadingScreen, App: AppStack, Auth: AuthStack }, { initialRouteName: 'AuthLoading', } );
export const MainNavigation = createDrawerNavigator({ Home: { screen: SwitchNavigator } }, { contentComponent: (props) => ( <DrawerNavigation {...props} /> ) });
// Create middleware and connect export const appNavigatorMiddleware = createReactNavigationReduxMiddleware( 'root', state => state.nav );
const ReduxAppNavigator = reduxifyNavigator(MainNavigation, 'root');
// create nav component class ReduxNavigation extends PureComponent { componentDidMount() { BackHandler.addEventListener('hardwareBackPress', this.onBackPress); }
componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.onBackPress); }
onBackPress = () => { const { dispatch, state } = this.props; if (state.index === 0) { return false; }
dispatch(NavigationActions.back()); return true;
};
render() { const { dispatch, state } = this.props; console.log(this.props); return ; } }
const mapStateToProps = state => { console.log(state.nav); return { state: state.nav }; }; `
export default connect(mapStateToProps)(ReduxNavigation);
after some changes navigation is working but back button still closing the app and maybe the reason is that state.index is not changing it value it is 0 on every screen i am opening maybe because of switchnavigation
"react-navigation": "^2.5.1", "react-navigation-redux-helpers": "^2.0.0-beta.1"
See #44
after removing if (state.index === 0) { return false; } its working
hello everyone i am new in react-native and stuck at android hardware back button integration in https://reactnavigation.org/docs/en/redux-integration.html#handling-the-hardware-back-button-in-android i am getting error of undefined is not an object (evaluating 'state.routes') below is my code
` const AppStack = createStackNavigator({ mainScreen: { screen: MainScreen, navigationOptions: ({ navigation }) => ({ header:
})
},
userProfile: {
screen: UserProfile,
navigationOptions: ({ navigation }) => ({
headerTitle: 'Profile',
headerTitleStyle: {
flex: 1,
textAlign: 'center',
alignSelf: 'center'
},
headerRight: (<View style={{ paddingRight: 15 }} >
<Icon onPress={() => navigation.navigate('EditUserProfile')} name="edit" />
)
})
},
editUserProfile: {
screen: EditUserProfile,
}, PrivateChat: { screen: PrivateChat, } }, logout: { screen: Logout } }, { initialRouteName: 'mainScreen', });
const AuthStack = createStackNavigator({ auth: { screen: Form, navigationOptions: { header: null } } });
const SwitchNavigator = createSwitchNavigator( { AuthLoading: AuthLoadingScreen, App: AppStack, Auth: AuthStack }, { initialRouteName: 'AuthLoading', } );
export const MainNavigation = createDrawerNavigator({ Home: { screen: SwitchNavigator } }, { contentComponent: (props) => ( <DrawerNavigation {...props} /> ) });
// Create middleware and connect export const appNavigatorMiddleware = createReactNavigationReduxMiddleware( 'root', state => state.nav );
const ReduxAppNavigator = reduxifyNavigator(MainNavigation, 'root');
// create nav component class ReduxNavigation extends PureComponent { componentDidMount() { BackHandler.addEventListener('hardwareBackPress', this.onBackPress); }
componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.onBackPress); }
onBackPress = () => { const { dispatch, state } = this.props; if (state.index === 0) { return false; }
};
render() { const { dispatch, state } = this.props; console.log(this.props); return ;
}
}
const mapStateToProps = state => { console.log(state.nav); return { state: state.nav }; }; `
export default connect(mapStateToProps)(ReduxNavigation);
after some changes navigation is working but back button still closing the app and maybe the reason is that state.index is not changing it value it is 0 on every screen i am opening maybe because of switchnavigation