Can't render custom tab icon

[laclance]

Can i render a custom tab icon? i have tried everything but cant get it to show up.

sample code:

navigationOptions: { tabBarIcon: <Image source={learnColour}/> }

navigationOptions: { tabBarIcon: () => <Image source={learnColour}/> }

 using android (samsung s4) on mac.
"react": "16.0.0-alpha.6",
"react-native": "0.43.4",
"react-navigation": "^1.0.0-beta.7",
"react-redux": "^5.0.4",
"redux": "^3.6.0"

[grabbou]

I couldn't reproduce it. The NavigationPlayground example (https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js#L110) works well without issues.

Can you post a full reproduction? What is learnColour? I suspect it's an error with your Image.

[laclance]

images.js:

export const learnColour = require('./icons/iconLearnColour.png');

tabNavigator.js:

// @flow
/* eslint-disable new-cap */
import {StackNavigator, TabNavigator} from 'react-navigation';
import ProfileScreen from '../components/profile';
import CourseListScreen from '../components/courselist';
import {Image} from 'react-native';
import React from 'react';
import {learnColour} from '../assets/images';

const LearnTab = StackNavigator({
       CourseList: {
         screen: CourseListScreen,
         path: '/'
       }
});

const ProfileTab = StackNavigator({
       Profile: {
         screen: ProfileScreen,
         path: '/'
       }
});

export default TabNavigator({
  LearnTab: {
         screen: LearnTab,
         path: '/',
         navigationOptions: {
                showLabel: false,
                tabBarIcon: <Image source={learnColour}/>,
                showIcon: true
         }
  },
  ProfileTab: {
         screen: ProfileTab,
         path: '/profile'
  }
}, {
       tabBarPosition: 'bottom',
       animationEnabled: false,
       swipeEnabled: false
});

appNavigator:

// @flow
/* eslint-disable new-cap */
import {StackNavigator} from 'react-navigation';
import TabNavigator from './tabNavigator';
import Home from '../components/home';
import SignIn from '../components/signin';

export default StackNavigator({
      Home: {screen: Home},
      SignIn: {screen: SignIn},
      TabNavigator: {screen: TabNavigator}
});

[laclance]

Sorry didn't want to post full code because ive tried so much and couldn't get any icon to display. Only thing ive been able to do is change label text On 24 Apr 2017 5:27 PM, "Mike Grabowski" <notifications@github.com> wrote: The NavigationPlayground example (https://github.com/react- community/react-navigation/blob/master/examples/NavigationPlayground/js/ StacksInTabs.js#L110) works well without issues. Can you post a full reproduction? What is learnColour? I suspect it's an error with your Image. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKVVVf1n5H4d6Y3kBeYyrjMUtpxBNYhtks5rzL9tgaJpZM4NGUNr> .

[grabbou]

Make sure your <Image /> component works correctly by putting it in a render method of any component. I believe this is an issue with your asset, not with the tabBar itself?

I've run StacksInTabs example (NavigationPlayground) and added a custom icon - it displays correctly.

[laclance]

No the asset works fine, i've have used it many times, most recent being with react-native-router-flux tabs.

…

On 24 Apr 2017 7:55 PM, "Mike Grabowski" ***@***.***> wrote: Make sure your <Image /> component works correctly by putting it in a render method of any component. I believe this is an issue with your asset, not with the tabBar itself? I've run StacksInTabs example (NavigationPlayground) and added a custom icon - it displays correctly. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKVVVZ36zXdIfkjEPkZ1-dFuyAff71XQks5rzOIGgaJpZM4NGUNr> .

[laclance]

Ok i must be doing something wrong then, i tried the StacksInTabs example but images still not showing.

// @flow
/* eslint-disable new-cap */
import {Button, Image, Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import React from 'react';

export default class App extends React.Component {
  render () {
    return (
      <AppNavigator />
    );
  }
}

const MyNavScreen = ({navigation}) => (
  <View>
    <Button
      onPress={() => navigation.goBack(null)}
      title="Go back"/>
  </View>
);

const MyHomeScreen = ({navigation}) => (
  <MyNavScreen navigation={navigation}/>
);

const MySettingsScreen = ({navigation}) => (
  <MyNavScreen navigation={navigation}/>
);

const MainTab = StackNavigator({
  Home: {
    screen: MyHomeScreen,
    path: '/'
  }
});

const SettingsTab = StackNavigator({
  Settings: {
    screen: MySettingsScreen,
    path: '/'
  }
});

const StacksInTabs = TabNavigator({
  MainTab: {
    screen: MainTab,
    path: '/',
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: (
            <Image style={{ width: 50, height: 50 }} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
      )
    }
  },
  SettingsTab: {
    screen: SettingsTab,
    path: '/settings',
    navigationOptions: {
      tabBarLabel: 'Settings',
      tabBarIcon:  (
            <Image style={{ width: 50, height: 50 }} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
      )
    }
  }
}, {
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false
});

const MainScreen = ({navigation}) => (
  <View style={{alignItems: 'center', justifyContent: 'center'}}>
    <Image
      style={{height: 40, width: 40, marginTop: 20}}
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>

    <TouchableOpacity
      key={'StacksInTabs'}
      onPress={() => {
        navigation.navigate('StacksInTabs');
      }}>
      <Text style={styles.title}>{'Stacks in Tabs'}</Text>
    </TouchableOpacity>
  </View>
);

const AppNavigator = StackNavigator({
  StacksInTabs: {
    name: 'Stacks in Tabs',
    screen: StacksInTabs
  },
  Index: {
    screen: MainScreen
  }
}, {
  initialRouteName: 'Index',
  headerMode: 'none',
  mode: Platform.OS === 'ios' ? 'modal' : 'card'
});

const styles = StyleSheet.create({
  title: {
    margin: 40,
    fontSize: 16,
    fontWeight: 'bold',
    color: '#444'
  }
});

[Peterl33]

I am also running into the same issue.
This was working on previous version. I updated this repo and now my icons too do not show up.
(Unfortunately i don't know what my previous version was)

[laclance]

i tried with v1.0.0-beta.6, still didn't work.
v1.0.0-beta.5 I encountered this error: #901

[grabbou]

@laclance taking your example, this:

tabBarIcon: (
        <Image style={{ width: 50, height: 50 }} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
      ),

works as expected. Note width and height.

[laclance]

Sorry, i left it out of comment (updated now) but I already tried adding styling, didn't make any difference. I just tried again with code above to double check and still no change.

[laclance]

putting a console log in TabView.js shows tabBarOptions as undefined so default props get used.

[grabbou]

You should check console.logs in renderIcon method, not the tabBarOptions. These are static config and don't contain icon-related options at all.

[laclance]

yeah i realized but _renderIcon is not getting called at all and TabBarComponent is TabBarTop()

[satya164]

Do you have showIcon: true? https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android

[laclance]

I did but i didn't put it into tabBarOptions :( thank you so much for the help guys.

[laclance]

The StacksInTabs example does not have showIcon though.

[hoajb]

Add return in tabBarIcon: ({ tintColor })=>{ return ... }. It's work for me

tabBarIcon: ({ tintColor }) => {
          return <Icon name="home" size={35} color={tintColor} />;}

------ or--

tabBarIcon: ({ tintColor }) => {
          return (<Image
              style={{ width: 50, height: 50 }}
              source={{ uri: "https://facebook.github.io/react/img/logo_og.png" }}/>);}

[Msspl-PrashenjeetRoy]

@satya164 Can we use tabBarOptions for customize tab icon, label and activeTintColor and label style in tabNavigationOptions for each component in between TabNavigator?

My Code is Below which we try:

Wall.navigationOptions = {
  tabBarIcon: <Faicon name="globe" size={25}/>,
  tabBarLabel: 'Wall',
  header: null,
  tabBarOptions: {
    showIcon: true,
    activeTintColor:activeBtnColor,
    inactiveTintColor:'orange',
    labelStyle: {
      fontSize: 14,
      color:activeBtnColor,
      fontFamily:'ProximaNova-Bold',
      textAlign:'center'
    },
    style: {
      backgroundColor: '#FEFEFE',
    },
  }
}

here activeBtnColor is dynamic for each component.

Is it possible??

[lejoss]

@laclance did you solve this issue?

[jr-k]

I got the same issue.

const MainTab = TabNavigator({
            s1: {screen: Screen1},
            s2: {screen: Screen2}
        }, {
            order: ['s2','s1'],
            initialRouteName: 's1',
            mode: 'modal',
            headerMode: 'none',
            swipeEnabled: true,
            tabBarPosition: 'bottom',
            animationEnabled: true,
            navigationOptions: ({navigation}) => ({
                tabBarIcon: (<Text>test</Text>)
            })
        });

And I got this error (iOS 9.2 iphone6): https://i.imgur.com/4CqwTi6.png

Something is weird because if I define it the same way in my screen like that:

export default class Screen1 extends Component {
     static navigationOptions({navigation}) {
            return {
                      tabBarIcon: (<Text>test</Text>)
            };
     }
} 

It's working...