Icon not show on Android

[jonathanroze]

Hi,

I have create an app with a tabbbar, on IOS everything works, icon are print but on Android only texts are print !

Do you have any idea ? And do you know how can i hide text on tabs ?

Thanks

[aksonov]

RNRF is just wrapper around ReactNavigation. Please check ReactNavigation first and make sure that your icons are displayed there.

[jonathanroze]

Yes i know it, i've tried with pure ReactNavigation and it's working ! With RNRF it's not working ! , It's working on IOS but not on ANDROID.

IOS :

ANDROID :

CODE :

import React from 'react'
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Reducers from '@Redux/Reducers';
import scenes from '@scenes';
import { Actions, Scene, Router,ActionConst } from 'react-native-router-flux';
import IconMaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {ORANGE} from '@Theme/colors'
import {
  Login,
  Home,
  Events,
  EventDetail,
  CreateEvent,
  Messages,
  Notifications,
  PrivateProfil,

} from '@Pages';

const tabbarConfigStyle= {
      height: 60,
      backgroundColor: '#ECF0F1',
      borderColor: '#ECF0F1',
};

const iconHome = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />)
const iconNotifications = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />)
const iconEvents = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />)
const iconMessages = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />)
const iconProfil = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />)


const Kernel = () => (
  <Provider store={createStore(Reducers)}>
  <Router>
    <Scene key="app" hideNavBar>

      <Scene key="login" initial hideNavBar>
        <Scene key="welcome" component={Login} />
      </Scene>

      <Scene key="PrivateProfil" mode="modal" modal direction="vertical" component={PrivateProfil} title="MyProfil"  />

      <Scene key="inapp"
      panHandlers={null}
      tabBarStyle={tabbarConfigStyle}
      showLabel={false}
      activeTintColor={ORANGE}
      tabBar
      tabs>

        <Scene key="Home" tabBarIcon={iconHome}>
            <Scene key="Home" component={Home} header={null} title="Home" />
        </Scene>

        <Scene key="Notifications" icon={iconNotifications} component={Notifications} title="Notifications"  />

        <Scene key="Events" tabBarIcon={iconEvents} >
          <Scene key="Events" component={Events} title="Events" />
          <Scene key="CreateEvent" component={CreateEvent} title="CreateEvent" />
          <Scene key="EventDetail" component={EventDetail} title="EventDetail" />
        </Scene>

        <Scene key="Messages" icon={iconMessages} component={Messages} title="Messages"  />
      </Scene>
      
    </Scene>
  </Router>
  </Provider>
)

export default Kernel

[aksonov]

Please try to reproduce issue with this project Example fork.

…

On 15 Jul 2017, at 15:34, Jonathan ***@***.***> wrote: Yes i know it, i've tried with pure ReactNavigation and it's working ! With RNRF it's not working ! , It's working on IOS but not on ANDROID. IOS : <https://user-images.githubusercontent.com/2753799/28239723-e12287be-6972-11e7-80b6-e68632989f23.png> ANDROID : <https://user-images.githubusercontent.com/2753799/28239726-e9e5715e-6972-11e7-8644-d8cbed163b54.png> CODE : import React from 'react' import { View } from 'react-native'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import Reducers from ***@***.***/Reducers'; import scenes from ***@***.***'; import { Actions, Scene, Router,ActionConst } from 'react-native-router-flux'; import IconMaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import {ORANGE} from ***@***.***/colors' import { Login, Home, Events, EventDetail, CreateEvent, Messages, Notifications, PrivateProfil, } from ***@***.***'; const tabbarConfigStyle= { height: 60, backgroundColor: '#ECF0F1', borderColor: '#ECF0F1', }; const iconHome = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />) const iconNotifications = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />) const iconEvents = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />) const iconMessages = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />) const iconProfil = (navigation) => (<IconMaterialCommunityIcons size={25} color={navigation.tintColor} name="map-marker" />) const Kernel = () => ( <Provider store={createStore(Reducers)}> <Router> <Scene key="app" hideNavBar> <Scene key="login" initial hideNavBar> <Scene key="welcome" component={Login} /> </Scene> <Scene key="PrivateProfil" mode="modal" modal direction="vertical" component={PrivateProfil} title="MyProfil" /> <Scene key="inapp" panHandlers={null} tabBarStyle={tabbarConfigStyle} showLabel={false} activeTintColor={ORANGE} tabBar tabs> <Scene key="Home" tabBarIcon={iconHome}> <Scene key="Home" component={Home} header={null} title="Home" /> </Scene> <Scene key="Notifications" icon={iconNotifications} component={Notifications} title="Notifications" /> <Scene key="Events" tabBarIcon={iconEvents} > <Scene key="Events" component={Events} title="Events" /> <Scene key="CreateEvent" component={CreateEvent} title="CreateEvent" /> <Scene key="EventDetail" component={EventDetail} title="EventDetail" /> </Scene> <Scene key="Messages" icon={iconMessages} component={Messages} title="Messages" /> </Scene> </Scene> </Router> </Provider> ) export default Kernel — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2038 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQpcaWJPj-xozU-THi8dP-PEs0t2930ks5sOL_bgaJpZM4OY_TR>.

[aksonov]

Sorry, I'm actively looking for Android contributor right now because I'm working on iOS app only.

[aksonov]

Closing because I didn't received forked Example to reproduce issue.

[rgchua]

@Clowning Please add showIcon={true} to your tabBar. RNRF v4 is built on top of react-navigation, do check their docs for the props.

[waqas19921]

@rgchua your solution done the trick

[susegroj]

I have the same issue but the oposite, for me is not working on iOS :( Does anyone why? I tried showIcon={true} with no success. For Android is looking good.