react native / navigation change bottom tap icon

Question

There is a question mark(or error mark) like photo. enter image description here

I want to change home icon to this icon.

import { Entypo } from '@expo/vector-icons';
<Entypo name="home" size={24} color="black" />

I'm beginner so If you upload full code, I'm so appreciate that.

thank you for read!

this is code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text } from 'react-native';

const HomeScreen = () => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
        </View>
    );
};

const ProfileScreen = () => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>This is profile</Text>
        </View>
    );
};

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

Answer 1

you can add custom view without font awesome can use image source by using options props forExample

<Tab.Screen 
                name={'home'}
                component={HomeScreen}
                options={{
                    headerShown: false,
                    tabBarIcon: ({ focused }) => (
                        <View style={focused ? [styles(theme, lang).tabBarIconStyle, { backgroundColor: theme.color.darkGrey }] : styles(theme, lang).tabBarIconStyle}>
                            <Image
                                source={require('../../src/assets/icons/home.png')}
                                style={
                                    focused
                                        ? styles(theme, lang).focusedIcon
                                        : styles(theme, lang).unFocusedIcon
                                } />
                            <Text style={focused ? [styles(theme, lang).tabBarLabelStyle, { color: theme.color.white }] : [styles(theme, lang).tabBarLabelStyle, { color: theme.color.darkGrey }]}>{localizedString(LocalizationKeys.HOME)}</Text>
                        </View>
                    ),
                }}
            />