Hi there i am using you custom tab navigator, I want to use Icon in tabBarIcon instead of using image tag but when i try to load the icon it's not working it's show blank.
Here is my code
Component,
} from 'react';
/* App routes define here */
import { StackNavigator, TabNavigator } from 'react-navigation'
import VerifyMobileNumber from '../containers/VerifyUser/VerifyMobileNumber'
import VerifyMobileOtp from '../containers/VerifyUser/VerifyMobileOtp'
import ProfilePage from '../containers/ProfileScreen/ProfilePage'
import WalkThrough from '../containers/WalkThrough/Screen'
/*Tab navigator pages*/
import UserPage from '../components/userPage'
import InviteFriend from '../containers/ProfileScreen/InviteFriend'
import UserPagew from '../components/userPage'
import InviteFriendw from '../containers/ProfileScreen/InviteFriend'
import FeatherIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import componentStyle from '../components/style/component';
import BottomNav from '../components/bottomNav'
const tabList = [
{
text: ' UserPage ',
redirectLink: 'UserPage',
id: 'UserPage',
icon: 'account-circle',
selectionIcon: 'account-circle',
},
{
text: ' InviteFriend ',
redirectLink: 'InviteFriend',
id: 'InviteFriend',
icon: 'account-card-detail',
selectionIcon: 'account-card-detail',
},
{
text: ' UserPagew ',
redirectLink: 'UserPagew',
id: 'UserPagew',
icon: 'calendar-check',
selectionIcon: 'calendar-check',
},
{
text: ' InviteFriendw ',
redirectLink: 'InviteFriendw',
id: 'InviteFriendw',
icon: 'calendar-check',
selectionIcon: 'calendar-check',
},
];
const UserPages = StackNavigator({
UserPage: {
screen: UserPage,
},
});
const InviteFriends = StackNavigator({
InviteFriend: {
screen: InviteFriend,
},
});
const UserPagews = StackNavigator({
UserPagew: {
screen: UserPagew,
},
});
const InviteFriendws = StackNavigator({
InviteFriendw: {
screen: InviteFriendw,
},
});
const tabBarConfiguration = {
tabBarOptions: {
style: {
backgroundColor: 'white',
borderTopWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.2,
shadowRadius: 4,
elevation: 1,
},
},
showIcon:true,
tabBarPosition: 'top',
tabBarComponent: BottomNav
};
const CustomTab = TabNavigator({
home: {
screen: UserPage,
navigationOptions: {
tabBarLabel: tabList[0].text,
tabBarIcon: ({ focused }) => (
<FeatherIcon
style={componentStyle.footerIcons}
source={focused ? tabList[0].selectionIcon : tabList[0].icon}
/>
)
}
},
menu2: {
screen: InviteFriend,
navigationOptions: {
tabBarLabel: tabList[1].text,
tabBarIcon: ({ focused }) => (
<FeatherIcon
style={componentStyle.footerIcons}
source={focused ? tabList[1].selectionIcon : tabList[1].icon}
/>
)
}
},
menu3: {
screen: UserPagew,
navigationOptions: {
tabBarLabel: tabList[2].text,
tabBarIcon: ({ focused }) => (
<FeatherIcon
style={componentStyle.footerIcons}
source={focused ? tabList[2].selectionIcon : tabList[2].icon}
/>
)
}
},
menu4: {
screen: InviteFriendw,
navigationOptions: {
tabBarLabel: tabList[3].text,
tabBarIcon: ({ focused, tintColor }) => (
<FeatherIcon
style={componentStyle.footerIcons}
source={focused ? tabList[3].selectionIcon : tabList[3].icon}
/>
)
}
}
}, tabBarConfiguration);
export const MobileVerification = StackNavigator({
CustomTab: { screen : CustomTab }
},{
headerMode: 'none'
},);
3.3k Dec 29, 2022
109 Jan 6, 2023
2.4k Jan 6, 2023
12 Sep 7, 2022
3.2k Dec 24, 2022
114 Jul 18, 2022
84 Feb 23, 2022
62 Jul 15, 2022
13 Nov 26, 2022
415 Oct 9, 2022
6.5k Jan 2, 2023
25 Nov 8, 2022
412 Dec 12, 2022
902 Dec 27, 2022
285 Sep 26, 2022
308 Jan 1, 2023