TopTabNavigator add custom icon - react-native

Question

I'm following an tutorial and I got a little stuck.
I'm trying to add an custom icon in a react native tab navigator but I had not been lucky and hope some fellow member can guide me in the right direction.
import React from 'react';
import { createMaterialTopTabNavigator, Image} from 'react-navigation';
import FoldersList from '../screens/FoldersList';
const Routes = {
Home: {
screen: (props) => <FoldersList {...props} tabIndex={0}/>,
navigationOptions: {
title: 'Home'
}
},
MyNewTab: {
screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'MyNewTab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create third tab folder'/>,
navigationOptions: {
tabBarIcon: ({ tintColor }) => {
return (<Image
style={{ width: 50, height: 50 }}
source={{ require: "../../images/AddFolder.png" }}/>);}
}
},
};
const routeConfig = {
swipeEnabled: false,
tabBarOptions: {
style: {
backgroundColor: '#013a65',
},
renderIndicator: () => null, // Indicatorline under tabbar
activeTintColor:'red',
inactiveTintColor:'#ffffff',
},
},
};
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);

Answer 1

Hello here is a simple code:
UPDATE
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon
option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
According to the docs, the showIcon property is setted to false on Android ( https://web.archive.org/web/20171015002750/https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android ).
IF THE ABOVE CODE DO NOT WORKS FOLLOW THE BELLOW STEPS:
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...
I really hope that some code help you...

Answer 2

if you until do not work if the codes bellow, please see this other code:
UPDATE
//Package json
//change "react-navigation-material-bottom-tabs": "0.1.2"
import React, {Component} from 'react';
import {View,
Text,
StyleSheet,
//use SafeAreaView to move the images away from the top of the phone
SafeAreaView,
Image} from 'react-native';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {createMaterialTopTabNavigator} from 'react-navigation'
//imports the icons
import Icon from 'react-native-vector-icons/Ionicons'
export default class App extends Component{
render(){
return(
<SafeAreaView style = {{ flex: 1, backgroundColor: '#f2f2f2'}} >
<AppTabNavigator/>
</SafeAreaView>
)
}
}
//homescreen and the text that is displayed on that page
class HomeScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Welcome to my Navigator! </Text>
</View>
);
}
}
//MyPage and the text that is displayed on that page
class MyPage extends Component {
render() {
return(
<View style = {styles.container}>
<Text>My Page </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class SettingsScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Settings </Text>
</View>
);
}
}
//settings and the text that is displayed on that page
class ProfileScreen extends Component {
render() {
return(
<View style = {styles.container}>
<Text>Profile </Text>
</View>
);
}
}
//ceated a topTabNavigator then moved the buttons to the bottom
const AppTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-home" color = {tintColor} size = {24}/>
)
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({tintColor}) => (
<Icon name="ios-settings" color = {tintColor} size = {24}/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},
MyPage: {
screen: MyPage,
navigationOptions: {
tabBarLabel: 'Page',
tabBarIcon: ({tintColor}) => (
<Icon name = "ios-body" color = {tintColor} size = {24} />
)
}
}
},
{
//starts the program on Home Screen
initialRouteName: 'Home',
//orders the screens
//order: ['Settings', 'Home'],
//puts a color when that screen is activated in the tabs
//activeTintColor: 'white',
//Allows for icons(only) to appear on inactive tabs when you have more than 3 tabs
shifting: true,
tabBarPosition: 'top',
// swipeEnabled: true,
// animationEnabled: false,
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'pink',
borderTopWidth: 0.5,
borderTopColor: 'grey'
},
// indicatorStyle: {
// height: 0
// },
showIcon: true
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
the code to help you is this:
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
// <Icon name="ios-profile" color = {tintColor} size = {24}/>
<Image
source={require('./assets/snack-icon.png')}
style={{
marginLeft: 1,
marginTop: 1,
width: 25,
height: 25,
tintColor: '#FF3D00',
}}
/>
)
}
},