CODEWITHSUNDEEP
react-nativetabsnavigation
LittleFunny
LittleFunny

Reputation: 8385

How to navigate to a new page using navigation.navigate without the tab bar in react native

I have a tab Navigation and Navigation bar in one of the tab. I would like to navigate to the next screen. I tried out the tutorial in the https://snack.expo.io/@react-navigation/stacks-in-tabs and added this line in the code:

static navigationOptions = ({navigate, navigation}) => ({
        title: "NOTIFICATION HISTORY",
        headerTitleStyle: {
          fontWeight: "bold",
          color: Colors.tintColor,
          alignSelf: "center"
        },
        headerStyle: {
          backgroundColor: "white",
          shadowOpacity: 0,
          shadowOffset: {
            height: 0
          },
          shadowRadius: 0,
          borderBottomWidth: 0,
          elevation: 0
        } 
    });



export const NotiStackNavigator = StackNavigator(
  {
    Noti: {
      screen: NotiScreen
    },
    NotiHistory: {
      screen: NotiHistScreen
    }
  },
  {
    navigationOptions: () => ({
      // gesturesEnabled: false,
      headerTitleStyle: {
        fontWeight: "bold",
        color: Colors.tintColor,
        alignSelf: "left"
      },
      headerStyle: {
        backgroundColor: "white",
        shadowOpacity: 0,
        shadowOffset: {
          height: 0
        },
        shadowRadius: 0,
        borderBottomWidth: 0,
        elevation: 0
      }
    })
  }

    export const MainTabNavigator = TabNavigator(
  {
    Home: {
      screen: HomeStackNavigator
    },
    Noti: {
      screen: NotiStackNavigator
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      // Set the tab bar icon
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          case "Home":
            iconName = "home";
            break;
          case "Noti":
            iconName = "bell-o";
            break;
          case "Settings":
            iconName = "cog";
        }
        return (
          <FontAwesome
            name={iconName}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        );
      }
    }),
    // Put tab bar on bottom of screen on both platforms
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    // Disable animation so that iOS/Android have same behaviors
    animationEnabled: false,
    swipeEnabled: false,
    // Show the labels
    tabBarOptions: {
      showLabel: true,
      activeTintColor: Colors.tabIconSelected,
      inactiveTintColor: Colors.tabIconDefault,
      style: {
        backgroundColor: Colors.tabBar
      }
    }
  }
);

I can have the tab and navigation going. When the navigation went to the next screen, the tabs still there and the name of the tab change to the new screen's name. How do I get rid of the tab when going to the next screen?

Upvotes: 0

Views: 1302

Answers (1)

skrusetvt
skrusetvt

Reputation: 261

In your details screen for your StackNavigator replace with this line :

Details: { screen: DetailsScreen, navigationOptions: { tabBarVisible: false  } },

or set it as a prop for the specific screen in navigationOptions

Upvotes: 1

Related Questions