the icon shows in a screen/page, but won't show in the bottom navigation. Solutions that I've tried:
./gradlew clean
then npx react-native run-android
, but same resultnpx react-native link react-native-vector-icons
then npx react-native run-android
, but same resultscreenshot bottom nav bar
screenshot setting screen
It does appear in screen/page as shown in above screenshot, but won't show in the bottom navigation.
NOTE: I've tested both in emulator and real android device, but still got same result!
Code for the bottom tab
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'
const BottomTab = createBottomTabNavigator();
const BottomTabNav = () => {
return (
<BottomTab.Navigator>
<BottomTab.Screen
name="Home"
component={ProductNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon:({color, size}) => {
<Ionicons name="home-outline" color={color} size={size} />
}}} />
<BottomTab.Screen
name="Settings"
component={SettingScreen}
options={{
tabBarLabel: "Settings",
tabBarIcon: ({color, size}) => {
<Ionicons name="settings-outline" color={color} size={size}
/>
}}} />
</BottomTab.Navigator>
)
}
export default BottomTabNav
const styles = StyleSheet.create({})
Also can you help why does the bottom tab goes to the next page?? where should I edit the code, thanks in advance. Below is the Screenshot:
The issue is very simple actually, you are not returning anything from the function,
tabBarIcon: ({color, size}) => {
//nothing returned here
<Ionicons name="settings-outline" color={color} size={size}
/>
You have to do this, either use brackets like below or use the return statement to your code.
tabBarIcon: ({color, size}) => (
<Ionicons name="settings-outline" color={color} size={size}
/>)
First, make sure you use the icons correctly.
For example, suppose we use MaterialCommunityIcons
.
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarLabel: 'Updates',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="settings" color={color} size={size} />
),
tabBarBadge: 3,
}}
/>
Tab.Navigator>
);
}
General usage is like this. Check the document for details. https://reactnavigation.org/docs/bottom-tab-navigator/
In my case I hadn't added
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
to the android/app/build.gradle as indicated in the [Oblador React Native Vector Icons README document][1] [1]: https://github.com/oblador/react-native-vector-icons#android
Once I added that, my icons displayed.
You need to create a custom tab bar component, and add the icons there. React Navigation has a pretty good documentation - https://reactnavigation.org/docs/bottom-tab-navigator#tabbar
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.