How do I apply external/global style to a react-navigation bottom tab-CodePudding

I tried to apply a global style to a bottom tab navigation in react-native but it can't accept it in the screenOptions prop. But it works fine when I use normal inline styling. Please help

export default function CustomBottomTab() {
  return (
    <Tab.Navigator
      screenOptions={{
           tabBarStyle: {styles.customTab} //underlines the dot as an error
}}
    >
      <Tab.Screen
        name='Landing'
        component={HomeScreen}
        options={{
          tabBarIcon: (props) => <AntDesign name='home' size={20} {...props} />,
        }}
      />
      <Tab.Screen
        name='Notifications'
        component={NotifScreen}
        options={{
          tabBarIcon: (props) => (
            <FontAwesome5 name='bell' size={20} {...props} />
          ),
        }}
      />
      <Tab.Screen
        name='Wishlist'
        component={WishScreen}
        options={{
          tabBarIcon: (props) => (
            <Ionicons name='bookmarks-outline' size={20} {...props} />
          ),
        }}
      />
      <Tab.Screen
        name='Messages'
        component={MessagesScreen}
        options={{
          tabBarIcon: (props) => (
            <FontAwesome5 name='comment' size={20} {...props} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

CodePudding user response：

Remove {} from around {styles.customTab}. It's not valid JavaScript syntax.

It needs to be:

tabBarStyle: styles.customTab