How to add an Icon as a button in navigation bar in react-native tab navigator

Viewed 82

1

I'm looking to add a search icon here but couldn't. Is there any way to add alongside the navigation bar titles?

I tried to add a view inside react fragment and add it inside Tab.Navigator but couldn't see it. Is there any alternate solutions?

This is my navigation container

const Navigator = ({ sheetRef }) => {
  const Tab = createMaterialTopTabNavigator();
  const [search, setSearch] = React.useState("");

  const onPress = useCallback(() => {
    setSearch((search) => !search);
  }, []);

  return (
    <Tab.Navigator
      screenOptions={({ route }) => screenOptions(route)}
      keyboardDismissMode="auto"
    >
      <Tab.Screen
        name="Forex"
        children={() => (
          <ForexContextProvider>
            <ForexScreen sheetRef={sheetRef} search={search} />
          </ForexContextProvider>
        )}
      />
      <Tab.Screen
        name="Commodities"
        children={() => (
          <CommoditiesScreen sheetRef={sheetRef} search={search} />
        )}
      />
      <Tab.Screen
        name="Crypto"
        children={() => <CryptoScreen sheetRef={sheetRef} search={search} />}
      />
    </Tab.Navigator>
  );
};

export default Navigator;
1 Answers
<Tab.Screen
    name="Crypto"
    children={() => <CryptoScreen sheetRef={sheetRef} search={search} />}
    options={{
        tabBarIcon: () => <IconComponentName />,
    }}
/>

Try this

You can look at more options here

Related