CODEWITHSUNDEEP
react-nativereact-navigation
Nedu
Nedu

Reputation: 59

How to pass a null screen in Tab Navigation in React Navigation 5

In previous versions of react navigation, we could do this

const CustomTabNavigator = createBottomTabNavigator({
    FirstTab: {
        screen: FirstScreen,
    },
    AddButton: {
        screen: () => null,
        navigationOptions: () => ({
            tabBarIcon: (<AddButton/>),
            tabBarOnPress: () => {}
        })
    },
    SecondTab: {
        screen: SecondScreen,
    }
}

Trying to replicate this with react-navigation is causing errors as it won't accept null. Anyone know a way around this?

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
const BottomTabNavigator = createBottomTabNavigator()

<BottomTabNavigator.Navigator>
            <BottomTabNavigator.Screen
                name="FirstTab"
                component={FirstScreen}
            />
            <BottomTabNavigator.Screen
                name="Add"
                component={null}
                options: () => ({
                   tabBarIcon: (<AddButton/>),
                   tabBarOnPress: () => {}
                })
            />
            <BottomTabNavigator.Screen
                name="Second Tab"
                component={SecondScreen}
            />
        </BottomTabNavigator.Navigator>

Upvotes: 2

Views: 1487

Answers (1)

VNDI
VNDI

Reputation: 36

Try this, I originally tried to pass it in as an inline function but I got a warning as well. This solved my problem.

Example:

const AddButton = () => {
  return null
}

<Tab.Screen name="AddButton" component={AddButton}/>

Upvotes: 2

Related Questions