0

I have BottomTabNavigator with 4 tabs I have the structure as in the screenshot below. That is the View below the BottomTabBar which is achieved but, the problem is I am not able to navigate from the Home/search tab to any other tab. Also, I tried with passing navigation in <Appcontainer /> as given below in the code but it is also not working.

I am using react-navigation v3.11.2

Is there any other way to pass navigation prop in <Appcontainer />. Or Any other method so I can able to navigate in BootomTabs.

Graphical Layout of BottomTabBar

const Tabs = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
    },
    Search: {
      screen: Search,
    },
    Add: {
      screen: () => null,
      navigationOptions: () => ({
        tabBarOnPress: async ({ navigation }) => {
          navigation.navigate('Upload');
        }
      }),
    },
    Profile: {
      screen: Profile,
    },
  },
);

export default class ParentTabs extends React.Component {
    render() {
        const { navigate } = this.props;
        return (
            <View>
                <AppContainer navigate={navigate} />
                <View>
                  <Text>My Text</Text>
                </View>
            </View>
        );
    }
}

const AppContainer = createAppContainer(Tabs);
Mayuresh Patil
  • 2,072
  • 1
  • 21
  • 44

1 Answers1

0
navigation.navigate('Upload');

You cannot navigate to any random component. Upload should be a route name defined in your tab navigator.

Otherwise, you need to trigger Upload logic inside your Add screen

Alex Turbin
  • 2,554
  • 2
  • 22
  • 35