React-native-router-flux: Tab bar not showing in Android

[nakulkundaliya]

Hello @aksonov

I am facing issue in android. Tabbar doesn't display in android device. I have checked your demo app code. It's working fine in IOS but, I facing issue in android.

I attached two screenshot 1st is android and 2nd is IOS/

Please help me.

[mikaello]

I am experiencing the same thing. Samsung S7, Android 7.0.

[aksonov]

Try to run pure react-navigation tab bar demo and check. RNRF just uses react-navigation TabNavigator internally.

[nakulkundaliya]

i tried with your demo code.
May i know why it's not working in your demo example?

[aksonov]

https://github.com/react-community/react-navigation/issues/1420

[nakulkundaliya]

Thanks for link
But i used 'react-native-router-flux' for page nevigation. let me know how it's possible to use 'react-navigation'

[aksonov]

RNRF uses react-navigation internally.

[nakulkundaliya]

Okay,
So how Can i fixed it. you have any idea about this?

[luco]

It seems that it's something related to styles. In fact, the tabbar appears, but it's not properly styled, as you can see below:

cc @aksonov

EDIT

It seems that it's not rendering tabbar item children contents:

[aksonov]

@nakulkundaliya First I need to know where is the bug - within RNRF or within react-navigation. That is why I asked you to try react-navigation tabbar demos first. If the bug is there, create issue there please.

[nakulkundaliya]

@aksonov i agree with @luco tab is appear but not display properly.
How can i set tabbar at bottom ( Android)?

One more thing if i set showLabel={true} then tab is appear with label but its display at top of the screen.

[aksonov]

Then probably you have to set proper styling. Definitely react-navigation issue...

[nakulkundaliya]

Can you please suggest to me how can i fixed it?

Here is my router code

<Scene
  key="tabbar"
  gestureEnabled={false}
  showLabel={false}
  tabs
  tabBarStyle={{backgroundColor:'red',marginTop:50}}
  initial

>
  <Scene key="Home"
    component={Home}
    hideNavBar
    iconName="homeTab"
    icon={TabIcon}
    initial
  />
  <Scene key="Search"
    component={Search}
    hideNavBar
    iconName="searchTab"
    icon={TabIcon}
  />
  <Scene key="AddPhoto"
    component={AddPhoto}
    hideNavBar
    iconName="addPhotoTab"
    icon={TabIcon}
  />
  <Scene key="Activity"
    component={Activity}
    hideNavBar
    iconName="activityTab"
    icon={TabIcon}
  />
  <Scene key="profile"  icon={TabIcon} iconName="profileTab">
    <Scene
      key="profile_1"
      component={Profile}
      hideNavBar
      initial
    />
    <Scene
      key="favourites"
      component={FavouritesSaved}
      title="SAVED"
      renderRightButton={() => <Text>Save</Text>}
    />
  </Scene>

[aksonov]

I don't have android. Probably set absolute layout for tabbar.

[nakulkundaliya]

@aksonov Finally, i got the solution.

Need to add showIcon={true} in

<Scene
  key="tabbar"
  gestureEnabled={false}
  showLabel={false}
  tabs
  showIcon={true}
  tabBarPosition='bottom'
  swipeEnabled={false}
  activeTintColor='black'
  activeBackgroundColor='transparent'
  tabBarStyle={{backgroundColor:'black'}}
  initial

>

[mikaello]

It looks like showIcon={true} is default on iOS, but not on Android. See screenshot of Example-app for iOS and Android:

[aksonov]

@mikaello @nakulkundaliya Good catch! Could you submit PR to make it default for both iOS and Android?

[nakulkundaliya]

@aksonov Sure i will do it