javascriptreact-nativeexpotabnavigatorreact-navigation-bottom-tab

Unable to see Icon using BottomTabNavigator in react-native


I am trying to create a BottomTab navigator and when I refresh the file tabs.js, the icon is not showing at expo mobile app.

I think the main issue is at tabBarIcon

File tab.js

import React from "react"
import {
    View,
    Image,
    TouchableOpacity
} from "react-native"
import {createBottomTabNavigator, BottomTabBar} from "@react-navigation/bottom-tabs"
import Home from "../screens/Home"
import { COLORS, icons } from "../constants"
import {Ionicons} from "@expo/vector-icons"

const Tab = createBottomTabNavigator();
const Tabs = () => {
    return (
        <Tab.Navigator
        >
            <Tab.Screen
             

            name="Home"
            component={Home}
            s
            options={{
            
                
                tabBarIcon: ({focused})=> {
                <Ionicons name="cart-outline" size={16} color= "#000000"
              } 
            }}
                />
        </Tab.Navigator>
    )
}

export default Tabs;

Home.js File

Thanks for help


Solution

  • This will work

        <Tab.Navigator>
            <Tab.Screen
                name="Home"
                component={Dashboard}
                options={{
                    tabBarIcon: ({}) => (
                    <Ionicons name="cart-outline" size={16} color="#000000" />
                ),
                }}
            />
        </Tab.Navigator>