CODEWITHSUNDEEP
reactjsreact-nativereact-native-navigation-v2
Payel Dutta
Payel Dutta

Reputation: 800

Remove Navigation Bar from React-Native-Navigation v2?

How to disable navigation bar for a specific screen in React-Nativa-Navigation V2?

Upvotes: 1

Views: 1694

Answers (4)

Giridhar Karnik
Giridhar Karnik

Reputation: 2372

Hope this helps. The correct way to do as of @react-navigation/native 5.1.3 seems to be this headerShown: false

<NavigationContainer>
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen
      name="Login"
      component={LoginScreen}
      options={{ title: "Login Screen", headerShown: false }}
    />
    {..other stuff..}
  </Stack.Navigator>
</NavigationContainer>

Upvotes: 0

Payel Dutta
Payel Dutta

Reputation: 800

For a specific component not showing topbar it can be done by putting 

topBar: {  visible: false }

in the options of component like so

Navigation.setRoot({
      root: {
        stack: {
          id: "App",
          children: [
            {
              component: {
                name: "rci.Login",
                options: {
                  topBar: {
                    visible: false
                  }
                }
              }
            }
          ]
        }
      }
    });

And also if it need to be set at the stack level so that no screen in the stack shows topbar we can do that by setting 

 options: {
    topBar: {
      visible: false
    }
  },

inside the stack. The whole code looks like 

Navigation.setRoot({
root: {
 stack: {
  options: {
    topBar: {
      visible: false
    }
  },
  children: [
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 1',
          myFunction: () => 'Hello from a function!',
        }
      }
    },
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 2',
        }
      }
    }
   ]
  }
 }
});

Upvotes: 1

yogevbd
yogevbd

Reputation: 1628

Your best option will be setting static options inside your component:

export default class YourComponent extends Component {
  static get options() {
    return {
      topBar: {
        visible: false,
        animate: false
      }
    };
  }
}

Notice that you can toggle the topBar visibility change animation.

Upvotes: 1

Arnaud
Arnaud

Reputation: 602

If you are using a StackNavigator, you need to set header to null on a given screen:

class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  ...
}

export default createStackNavigator({
  Home: HomeScreen
});

Upvotes: 0

Related Questions