Facing issue when trying to add image on bottom tab navigation in react-native

Question

When i am trying to adding image in bottom tab navigation then i just got only title of bottom tab. How i can get image in bottom tab navigation in react-native?

I am using

import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"  

//this libraries for achieve bottom tab navigation in react native.
function TabNav() {
        return (
   
            <Tab.Navigator
                initialRouteName="Logbook"
                
                tabBarOptions={{
                    activeTintColor: "#3498db",
                    
                }}
            >
                <Tab.Screen
                    name="Logbook"
                    component={Logbook}
                    options={{
                        tabBarLabel: 'Logbook',
                        tabBarIcon:({focused})=>{
                            
                            focused?
                            <Image source={Images.logbookImg} style={styles.activeImg} />
                            : <Image source={Images.logbookImg} style={styles.deActiveImg} />
                        }
                    }}
                
                />
                <Tab.Screen
                    name="Voyage"
                    component={Voyage}
                    options={{
                        tabBarLabel: 'Voyage',
                        tabBarIcon:({focused})=>{
                            
                            focused?
                            <Image source={Images.voyageImg} style={styles.activeImg} />
                            : <Image source={Images.voyageImg} style={styles.deActiveImg} />
                        }
                    }}
                />
                <Tab.Screen
                    component={Crew}
                    name="Crew"
                    options={{
                        tabBarLabel: 'Crew',
                        tabBarIcon:({focused})=>{
                            
                            focused?
                            <Image source={Images.crewImg} style={styles.activeImg} />
                            : <Image source={Images.crewImg} style={styles.deActiveImg} />
                        }
                    }}
                />
            </Tab.Navigator>
    
        )

Answer 1

The problem is very simple, you are not returning the image

tabBarIcon:({focused})=>(
                       focused?
                       <Image source={Images.logbookImg} style={styles.activeImg} />
                       : <Image source={Images.logbookImg} style={styles.deActiveImg} />
                   )

replace the curly braces with brackets or put a return statement and it would work as expected.