How to use custom font to design Bottom Navigator - react-native

Question

How do I get to use custom font in React native when designing a Bottom tab navigator?
I have been able to use it on other forms without trouble, but on bottom tab navigator, I still appear to have some challenges with it.
My code looks thus, but it still is the same, Nothing changes.
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import HomePage from '../src/HomePage';
import TransfersPage from '../src/TransfersPage';
import ProfilesPage from '../src/ProfilePage';
import SettingsPage from '../src/SettingsPage';
import Icon from 'react-native-vector-icons/Ionicons';
const Tab = createBottomTabNavigator();
function BottomNavigation() {
return (
<Tab.Navigator screenOptions={({route}) => ({
headerShown:false,
style:{
fontFamily:'Poppins-Medium',
fontSize:27,
color : '#00BB23'
},
tabBarIcon:({color, size, focused}) =>{
let iconName;
if (route.name ==='HomePage'){
iconName = focused ? 'ios-home-sharp' : 'ios-home-outline'
}else if(route.name ==='Transfers'){
iconName = focused ? 'ios-send-sharp' : 'ios-send-outline'
}else if(route.name ==='Profile'){
iconName = focused ? 'ios-person-sharp' : 'ios-person-outline'
}else if(route.name ==='Settings'){
iconName = focused ? 'ios-settings-sharp' : 'ios-settings-outline'
}
return <Icon name={iconName} size={27} color={"#00BB23"} />
}
})}>
<Tab.Screen name="HomePage" component={HomePage} />
<Tab.Screen name="Transfers" component={TransfersPage} />
<Tab.Screen name="Profile" component={ProfilesPage} />
<Tab.Screen name="Settings" component={SettingsPage} />
</Tab.Navigator>
);
}
export default BottomNavigation;
And my app.Js looks like this :
import React from 'react';
import {Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SplashScreen from './src/SplashScreen';
import LoginPage from './src/LoginPage';
import RegisterPage from './src/RegisterPage';
import BottomNavigation from './navigation/BottomNavigation';
const Stack = createStackNavigator()
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}} />
<Stack.Screen name="Login" component={LoginPage} options={{headerShown:false}} />
<Stack.Screen name="Register" component={RegisterPage} />
<Stack.Screen name="Dashboard" component={BottomNavigation} options={{headerShown:false}} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Is there something i am not doing correctly?

Answer 1

<Tab.Screen
options={() => ({
tabBarIcon: ({ focused }) => (
<View
style={[
styles.usContainer,
{ borderColor: focused ? colors.primary : colors.white },
]}>
<Text
style={[
styles.usText,
{ color: focused ? colors.primary : colors.white },
]}>
US
</Text>
</View>
),
})}
name="us-screen"
component={Demo}
/>
you can use your custom component like that