Using stackNavigator and tabNavigator at once doesn't work correctly React Native

0
votes

Problem

I am creating a social media app in react native, and I am trying to have stackNavigator and TabNavigator both in the same app. I have two stackNavigator screens, both with the default screen and another screen that can pop up. After that I try to put both of those stackNavigator screens into a tabNavigator screen, and I get a lot of weird bugs, like going to the stackNavigator screen just takes me to a new tab, and the defualt tabs (feed and notifs) aren't rending on the first screen, only the pop up second screen.

Code

    const Feed = StackNavigator({
  Feed: {
    screen: FeedView,
  },
  CommentScreen: {
    screen: Comments,
  },
});

const Notifs = StackNavigator({
  NotificationView: {
    screen: Notifications,
  },
  CommentScreen: {
    screen: Comments,
  },
})

const MyApp = TabNavigator({

  Feed: {
    screen: FeedView,
  },
  Notifs: {
    screen: Notifs,
  },
},
{
  tabBarPosition: 'bottom',
  animationEnabled: false,
  lazy: true,
  tabBarOptions: {
    activeTintColor: '#fe8200',
    inactiveTintColor: '#A9A9A9',
    activeBackgroundColor: '#DCDCDC',
    inactiveBackgroundColor: '#ffffff',
    showIcon: 'true',
    showLabel: 'false',
  },
tabBarOptions: {
  showIcon: 'true',
  style: {
    backgroundColor: 'white',
  },
  tabStyle: {
    height: 53,    
  },
  labelStyle: {
    fontSize: 14,
    color: 'grey',
  },
  iconStyle: {
    showIcon: 'true',
  },
  indicatorStyle: {
    backgroundColor: '#fe8200',
  },
}
});


export default MyApp;

What should happen

The user should have two tabs, and on each tab they can be taken to a new screen using stack navigator without tabs. I would love some help fixing this!

1
javascriptandroidreact-nativereact-navigation

1 Answers

2
votes

The key is to set tabBarVisible to false for your screen no need for Tabs.

Try:

const Feed = StackNavigator({
  Feed: {
    screen: FeedView,
  },
  CommentScreen: {
    screen: Comments,
    navigationOptions: {
      tabBarVisible: false,
    }
  },
});

const Notifs = StackNavigator({
  NotificationView: {
    screen: Notifications,
  },
  CommentScreen: {
    screen: Comments,
    navigationOptions: {
      tabBarVisible: false,
    }
  },
})

And there is a problem of naming. in <MyApp />, it might be Feed not FeedView.

const MyApp = TabNavigator({
  Feed: {
    screen: Feed,
  },
  Notifs: {
    screen: Notifs,
  },
},