Remove Navigation Bar from React-Native-Navigation v2?

Question

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

Answer 1

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

Answer 2

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',
        }
      }
    }
   ]
  }
 }
});

Answer 3

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>

Answer 4

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.