React-native-router-flux: 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 [e-mail] 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 '@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) => ()
const iconNotifications = (navigation) => ()
const iconEvents = (navigation) => ()
const iconMessages = (navigation) => ()
const iconProfil = (navigation) => ()

const Kernel = () => (

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

)

export default Kernel
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2038#issuecomment-315534276, 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.