CODEWITHSUNDEEP
reactjsreact-nativenavigation
Uni
Uni

Reputation: 187

React Native - Navigating to other screen from a component in Tab Navigation

I'm having an issue with Navigation in React Native

My app has Tab Navigation(Main Screen). The first component has a list of articles. When an user taps on an articles. A detail article screen will appear overlay the Main Screen

In the First component. I created a createStackNavigator to open the detail article screen. But the problem is that it seems to replace the First component instead of overlaying the Main Screen

Here is the problem

enter image description here

But what I want is like below

enter image description here

Upvotes: 1

Views: 1057

Answers (1)

nikos fotiadis
nikos fotiadis

Reputation: 1085

You can do that by hiding the tab navigator bar in specific pages of the stack navigator.

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index != 0) {
    tabBarVisible = false;
  }

  return {
   tabBarVisible,
  };
};

In this example FeedStack is the stack navigator you have inside you tab navigator. The if statement decides in which screens to show the tab navigator based on the id. In your case you want to show the navigator only on one screen. I suppose that the id of that screen is 0, but if it isn't you can just replace it with the id you want. The id of the screens is based on the order in which they are declared inside the stack navigator configuration.

Upvotes: 1

Related Questions