CODEWITHSUNDEEP
react-native
Tayyab Tahir
Tayyab Tahir

Reputation: 11

how to import bottom navigator in react-navigation in other screens

I have created a bottom navigator using react-navigation. how can i use it to my other screens which are not included in the bottom navigator? 

const Stack = createStackNavigator({
intro: {
    screen: IntroSlides
},
dashboard: {
    screen: createBottomTabNavigator({
        inbox: {
            screen: Inbox,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: () => (
                    <Image resizeMode={'contain'} style={styles.icon} source={require('./src/assets/MyProfileIcon.png')} />
                ),
                title: 'Profile',
            }),
        },

        favourite: {
            screen: Favourite,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: () => (
                    <Image resizeMode={'contain'} style={styles.icon} source={require('./src/assets/FavouriteIcon.png')} />
                ),
                title: 'Favourite',
            }),

Upvotes: 1

Views: 118

Answers (1)

Milad Jafari
Milad Jafari

Reputation: 1155

Put your other items/screens in a stack navigator:

const Bottom = createBottomTabNavigator({
    item1: {screen: Screen1},
    item2: {screen: Screen2},
    },{
        initialRouteName: "item1",
    }
)

export default createStackNavigator({
    tabs: Bottom,
    item3: Screen3, // your other screen
})

and if you want hide stacknavigator from item3 screen, you can use this in your component: 

static navigationOptions = ({ navigation, screenProps }) => ({
    header: null
});

Upvotes: 1

Related Questions