My tabs are displaying correctly, yet the icons don't display.
With my current code, I am attempting to use an if statement for displaying the icons with their respective tabs. I only have on tab set up to have an icon to test it. But, I have yet to even get one icon to display. It keeps referring to the 'TabBarIcon' in the error, saying "Check the render method of 'TabBarIcon'". Any help is appreciated, Thank you!
Here's my current code:
import React from 'react';
import { View } from 'react-native';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation';
import { Icons } from 'react-native-vector-icons/Ionicons';
import HomeScreen from '../Components/Screens/Home/index';
import PodcastScreen from '../Components/Screens/Podcast/index';
import VideoScreen from '../Components/Screens/Videos/index';
import InquireScreen from '../Components/Screens/Inquire/index';
My tabs are displaying correctly, yet the icons don't display. With my current code, I am attempting to use an if statement for displaying the icons with their respective tabs. I only have on tab set up to have an icon to test it. But, I have yet to even get one icon to display. It keeps referring to the 'TabBarIcon' in the error, saying "Check the render method of 'TabBarIcon'". Any help is appreciated, Thank you! Here's my current code:
import React from 'react'; import { View } from 'react-native'; import { createBottomTabNavigator, BottomTabBar } from 'react-navigation'; import { Icons } from 'react-native-vector-icons/Ionicons';
import HomeScreen from '../Components/Screens/Home/index'; import PodcastScreen from '../Components/Screens/Podcast/index'; import VideoScreen from '../Components/Screens/Videos/index'; import InquireScreen from '../Components/Screens/Inquire/index';
export const Tabs = createBottomTabNavigator ({ Home: { screen: HomeScreen, navigationOptions:{ tabBarLabel: 'Home', tabBarIcon: ({ tintColor }) => (
)
}
},
Podcast: { screen: PodcastScreen },
Videos: { screen: VideoScreen },
Inquire: { screen: InquireScreen }
},
{
tabBarOptions: {
activeTintColor: 'white',
animationEnabled: true,
inactiveTintColor: '#E0E0DF',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: '#000326',
},
showIcon: true
},
tabBarPosition: "bottom"
});