CODEWITHSUNDEEP
androidreact-nativenavigationreact-reduxreact-navigation
Zaki Alam
Zaki Alam

Reputation: 25

React Native Navigation

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);

Upvotes: 0

Views: 400

Answers (1)

nils
nils

Reputation: 81

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.

Upvotes: 2

Related Questions