React Native Navigation

Question

I am making an app , in which I used Drawer Navigator and i nested a Stack Navigator inside it . Drawer contains screen HOME , PRODUCTS , Profile etc. While i used Stack navigator inside Home screen to switch to 3 different screen Products->ItemDescription . Issue 1: If I go to Product or Item Description via Home .And if i open drawer in products or ItemDescription , I cant go back to home on clicking HOME from drawer .WHile clicking other options on drawer menu i can switch to diff screens.

Issue 2 : I have a Navbar from 'navbar-native' , which i used in every component namely HOME , PRODUCTS , ItemDescription , Cart etc. Can you help me to link with redux so that i can open different screen on clicking on its ICON namely CART and SEARCH screen.

Drawer Code :

 const RootDrawer = DrawerNavigator({
 Home: {
   screen: HomeScreen,
   style :{backgroundColor:'blue'},
 },
 Profile: {
   screen: ProfileScreen,
 },
 Products: {
   screen: Products,
 },
 Cart: {
   screen: Cart,
 },
});

export default RootDrawer;

HomeScreenCode :

 class Home extends React.Component {

      constructor(props){
        super(props) ;
        this.openUp = this.openUp.bind(this)

      }

      openUp(){
         this.props.navigation.navigate('DrawerOpen'); 
    // open drawer passed to all components to open Drawer from hamburger 
    //iconpresent at NAVbar
       }



      render() {
            return (
                  <SimpleApp key={1} screenProps={this.openUp} />
         );
      }
    }




const SimpleApp = StackNavigator(
   {
  drwlyout: { screen: DrawerLayoutMain ,      navigationOptions:({navigation}) => ({ header: false }  )              },
  prodlyout: { screen: Products ,    navigationOptions:({navigation}) => ({ header: false })},
  itemdsclyout: { screen: ItemDescription ,    navigationOptions:({navigation}) => ({ header: false })},
  navbarlayout: { screen: NavBarComponent ,    navigationOptions:({navigation}) => ({ header: false })},


  }   );

function mapDispatchtoProps(dispatch){
   return  bindActionCreators({getDataFirebase:getDataFirebase},dispatch);
}
export default connect(null,mapDispatchtoProps)(Home);

nils nils · Accepted Answer · 2018-02-02T07:52:30

For your first issue, you will need a navigation reducer, a basic description of how to implement Redux with React-Navigation can be found here When you have to listen for the specific navigation action inside of your reducer. For example, your DrawerNavigator looks something like this:

const nav = (state = INITIAL_NAV_STATE, action) => {
let nextState;

switch (action.type) {

  case REHYDRATE:
    // if you're using redux-persist

  case 'Main': // where 'Main' is your StackNavigator
    nextState = AppNavigator.router.getStateForAction(
      NavigationActions.navigate({ routeName: 'Home' }),
      state
    );
    break;

See the 'routeName' which is the name of your Home screen. So, your root or Main drawer Navigator should look something like this:

const routeConfig = {
  Main: {
    screen: MainStackNavigator,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="a006_start" size={28} color={tintColor} />
      ),
    drawerLockMode: 'locked-closed'
  }
},

.... additional Code ....
.... like navigationOptions etc. ....

const MainDrawerNavigator = DrawerNavigator(routeConfig, routeOptions);

export default MainDrawerNavigator;

I'm sorry that I haven't worked with 'navbar-native' yet but I guess that if you're wiring up your redux configuration like this you could listen to the particular navigation actions. Which then can be processed inside of your navigation reducer.

React Native Navigation

1 Answers