TopTabNavigator add custom icon

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

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',
        }}
      />
    ) 
   }
  },

Answer 2

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...