Problems with react-navigation exactly with TabNavigator and StackNavigator

Question

hi i have a problem with react-navigator exactly TabNavigator and StackNavigator . the problem is that, the StackNavigator does't work when i put it inside a TabNavigator

I have this part in App.js, in this part I declared my stackNavigator

import uno  from './android/Componentes/uno'
import dos  from './android/Componentes/dos'
import tres  from './android/Componentes/tres'
import inde from './android/Componentes/inde'
import Bonton from './android/Componentes/Bonton'
class App extends Component{
 render(){
  return(
    <inde />
);
}
}
const Root = StackNavigator ({
  inde:{screen:inde},
  uno:{screen: uno},
  dos:{screen: dos},
  tres:{screen: tres},
  Bonton:{screen:Bonton}
});

export default Root;

in this part (inde.js) i declare my TabNavigator

 import uno  from './uno'
 import dos  from './dos'
 import tres  from './tres'

 export default class inde extends Component{
   render(){
     return(
       <Root />
     );
   }
 }
 const Root = TabNavigator ({
    uno:{screen: uno},
    dos:{screen: dos},
    tres:{screen: tres}
  });

and this in uno.js

export default class uno extends Component{
render(){
    return(
        <Button
    onPress={() => this.props.navigation.navigate('Bonton')}
    title="Go to Lucy's profile"
  />
    );
}
}

am i doing anything wrong?

Answer 1

Try this. I suggest that you should create navigator.js. Put inside related react navigation.

 // App.js
    import uno  from './android/Componentes/uno'
    import dos  from './android/Componentes/dos'
    import tres  from './android/Componentes/tres'
    import inde from './android/Componentes/inde'
    import Bonton from './android/Componentes/Bonton'
    class App extends Component{
     render(){
      return(
        <inde />
    );
    }
    }
    const RootStackNavigator = StackNavigator ({
      inde:{screen:inde},
      uno:{screen: uno},
      dos:{screen: dos},
      tres:{screen: tres},
      Bonton:{screen:Bonton}
    });

    const RootTabNavigator = TabNavigator ({
      stackNav: {screen: RootStackNavigator },
      uno:{screen: uno},
      dos:{screen: dos},
      tres:{screen: tres}
    });


    export default RootTabNavigator;

    // index.js

    export default class index extends Component{
      render(){
        return(
          <RootTabNavigator />
        );
      }
    }