CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
ssuhat
ssuhat

Reputation: 7656

React Native - React Navigation show header and footer on every page

Hi I'm using this package for my navigation:

https://github.com/react-community/react-navigation

First of all here is my code:

export default MainNavigator =
    StackNavigator(
        {
            header: {
                screen: StackNavigator({
                    footer: {
                        screen: TabNavigator({
                            welcome: {screen: WelcomeScreen},
                        },
                            {
                                tabBarPosition: 'bottom',
                                swipeEnabled: false,
                                lazy: true,
                                tabBarOptions:{
                                    style: {background: '#fff'}
                                }
                            }
                        )
                    }
                }),
            },
            auth: {screen: AuthScreen},
            login: {screen: LoginScreen},
        },
        {
            headerMode: 'none',
        },
    );

Here is what I want to achieve: I want to show header and footer on all main screen except for auth and login.

With my current code yes it's working properly, but I don't think its a good practice because I declare new route (header, footer) for showing topBar and bottom bar. Am i correct?

If not how can I include header or footer (its okay if I need to make custom component) only to all my page except for login , and auth?

Thanks

Upvotes: 3

Views: 8024

Answers (1)

Balram Khichar
Balram Khichar

Reputation: 95

You can hide the header by passing header null.

export const Router = StackNavigator({
   auth: {
      screen: Auth,
      navigationOptions: ({ navigation }) => ({ header: null, })
   },
   test: {
      screen: Test,
      navigationOptions: ({ navigation }) => ({ header: <Text>Hi</Text> }) 
   }
});

You can read more about it here: https://reactnavigation.org/docs/navigators/stack

Upvotes: 1

Related Questions