React-native-router-flux: Bottom tabbar icons not showing up

[AlmogRnD]

Version

• "react-native-router-flux": "^4.0.0-beta.28",
• "react-native": "^0.54.0",
• "react": "^16.3.0-alpha.1",

Expected behavior

Icons should show up

Actual behavior

Icons not showing up

I updated to the latest version of react-native and the icons are not showing up here is my current code

Index

<Tabs key="tabbar" swipeEnabled={false} showLabel={true} lazy={true} showIcon={true} tabBarPosition="bottom" activeBackgroundColor="#25abf9" inactiveBackgroundColor="#30393F" inactiveTintColor="#ffffff" activeTintColor="#ffffff" tabBarStyle={{height:55}}>
                                    <Stack key="main" title="Photos" tabBarLabel="Photos" inactiveBackgroundColor="#30393F" activeBackgroundColor="#25abf9" icon={PhotosTabIcon} titleStyle={{ color: 'white', alignSelf: 'center'}}>
                                        <Scene key='photos' type={Actions.RESET}  component={Photos} title={'Home'}  initial={false} navBar={CustomNavBar} />
                                        <Scene key='singlePhoto' component={SinglePhoto} title={'Photo'} photoDate={null} initial={false} navBar={CustomNavBarPhotos} hideTabBar/>
                                        <Scene key='photoUpload' component={PhotoUpload} title='Upload Photo' photoDate={null} initial={false} navBar={CustomNavBarUpload} hideTabBar />
                                        <Scene key='sync' component={Sync} title='Syncing Data' initial={false}  hideTabBar hideNavBar  />
                                        <Scene key='offlineMode' component={OfflineMode} title='Offline' initial={false} navBar={CustomNavBar}  hideTabBar />
                                        <Scene key='compressionMode' component={CompressionMode} title='Compressing Video' initial={false}  hideTabBar hideNavBar />
                                    </Stack>
                                    <Stack key="apps" title="Templates" tabBarLabel="Apps" inactiveBackgroundColor="#30393F" activeBackgroundColor="#25abf9" icon={AppsTabIcon} titleStyle={{ color: 'white', alignSelf: 'center' }}>
                                        <Scene key='Apps' type={Actions.RESET} component={AppsTempWebView} title='Templates' initial={false} navBar={CustomNavBarApps} />
                                    </Stack>
                                </Tabs>

PhotosTabIcon

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'react-native-elements';

const propTypes = {
    selected: PropTypes.bool,
    name: PropTypes.string,
};

const PhotosTabIcon = () => {
    return <Icon name='camera' size={28} type={"font-awesome"} color={'white'}  />
};

PhotosTabIcon.propTypes = propTypes;
export default PhotosTabIcon;

[k0sukey]

https://github.com/react-navigation/react-navigation/pull/3650

I found this PRs, maybe this is the cause?

[ovaris]

Just set width and height for Icon as a temporary fix

[AlmogRnD]

@ovaris did that it didn't work, @aksonov can you merge that PR from the main package so we can fix this?

[esutton]

+1 Tab bar buttons disappear on iOS. Android is fine.

iOS was fine if using RN 0.53.3.

after yarn add [email protected]
"react": "^16.2.0", "react-native": "v0.54.0-rc.3", "react-native-router-flux": "4.0.0-beta.27",

[sofwu]

+1 Tab bar buttons disappear on iOS

after yarn add [email protected]

    "react": "^16.2.0",
    "react-native": "v0.54.0-rc.3",
    "react-native-router-flux": "4.0.0-beta.27",

[AlmogRnD]

Anyone have any news regarding this, we really can't launch without this

[aksonov]

Does it work for RN 0.53?

On 19 Mar 2018, at 01:16, Almog Koren [e-mail] wrote:

Anyone have any news regarding this, we really can't launch without this

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2923#issuecomment-374069816, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcRBYHbrYUz_7yseQ5TulHdKaloZzks5tfvjFgaJpZM4SiDed.

[AlmogRnD]

@aksonov no I tested on 0.53 same issue, the version which it was fine was 0.51 where on 0.54 had to upgrade due to testing

[aksonov]

So what PR I must merge to make it work?

On 19 Mar 2018, at 08:31, Almog Koren [e-mail] wrote:

@aksonov https://github.com/aksonov no I tested on 0.53 same issue, the version which it was fine was 0.51 where on 0.54 had to upgrade due to testing

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2923#issuecomment-374123105, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcQCxNnDTf-qfExyccZ7bM71cLhEVks5tf16-gaJpZM4SiDed.

[AlmogRnD]

The following PR https://github.com/react-navigation/react-navigation/pull/3650
from react-navigation, I think it was already merged so you just need to upgrade react-navigation to 1.5.1

[aksonov]

The problem is addListener error because of breaking changes, please check other github issue...

On 19 Mar 2018, at 08:37, Almog Koren [e-mail] wrote:

The following PR react-navigation/react-navigation#3650 https://github.com/react-navigation/react-navigation/pull/3650
from react-navigation, I think it was already merged so you just need to upgrade react-navigation to 1.5.1

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2923#issuecomment-374124253, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcQ_3Vis6WPBP5JS0HbynKR8txW5Oks5tf2BPgaJpZM4SiDed.

[AlmogRnD]

@aksonov what other issues? Are you saying you can't upgrade react-navigation because of breaking changes at some point it would need to be updated as react is getting many changes a lot of them fixes for issues and support for new ios

[aksonov]

Check #2893 and feel free to fix it.
Now I'm working on RNRF v5 to work with upcoming 2.0 react navigation (yeah, it introduces many NEW breaking changes again). With v5 RNRF will depend only from navigational views, not from react-navigation routers/navigators/listeners/etc, so such situation should not happen again...

[yousseftarekkh]

I am having the same issue, i tried to upgrade my "react-navigation" to the latest in order to get my icons to work (previously suggested) but then i get the 'addListener' error, when i go back to my last version of react-navigation, no existing icons. Just refer me to a solution if found, please. Thanks!

[Mimicx]

Any Solution ?

[avishayil]

Same problem here

[co2nut]

@ovaris could you give an example?

fix . by setting the style to the icon component

[tmaly1980]

@aksonov So what is the solution here? Why are you working on the next major release when there are serious issues with the current one? I would think it's more important to get the rest of RNRF v4 working with a newer version of react-navigation. Otherwise, the entire v4 is unstable/experimental.

It seems like unless there's an easy fix, that one would be unable to use RNRF v4 in a stable production environment and would be better off just going to a different navigator implementation entirely (possibly using react-navigation directly). Not being able to use the tab bar properly (with icons) is pretty big of an issue.

FYI, current version of react-navigation is 1.5.11 . I've updated it explicitly in my package.json and it seems to work fine, though I haven't looked at the tab bar icons yet.

[AlmogRnD]

@tmaly1980 the problem is that react-navigation is also not really good or reliable

[tmaly1980]

@AlmogRnD Then why was RNRF v4 developed on it in the first place? And what are the alternatives?

Also, I've used it on half a dozen other projects, and although pieces can be annoying to deal with, it's pretty reliable with the newer production versions.

[AlmogRnD]

@tmaly1980 Yea for me this is the biggest core issue with react-native I think FB should have routing as part of the core package

[tmaly1980]

I also set an explicit width/height on a View wrapping Icon, as per @ovaris . I also updated react-navigation explicitly and am not getting any crashing issues that @aksonov mentions. Seems to work fine now.

[tmaly1980]

@AlmogRnD Sure, RN is a pain in the butt across the board. But this is why we get paid more.

[ibraheeam]

I use Expo and I just upgraded to Expo 26 and faced this issue, just set height, width manually as @ovaris said

`

class TabIcon extends Component {
render() {
    const color = this.props.focused ? Colors.mainColor : Colors.lightGray;
    return (
        <View
            style={{
                flex: 1,
                flexDirection: 'column',
                alignItems: 'center',
                alignSelf: 'center',
                justifyContent: 'center',

            }}
        >
            <Icon
                style={{ color, width: 25, height: 25 }}
                name={this.props.iconName || 'circle'}
                size={25}
            />
        </View>
    );
} 
}

`

I did not find anything about iconName prop in the docs but its their

[avishayil]

@tmaly1980 Can you please explain exactly what you did, what files did you change?

[ghost]

The icon needs to be wrapped with a View that has a set width and height. That works

[tmaly1980]

@avishayil , My scene looks like:

<Scene icon={TabIcon} iconName='timer' key="tab1" component={Dashboard} />

And My TabIcon component looks like:

function TabIcon(props) {
  return (
  <View style={styles.wrapper}>
    <View style={styles.container}>
      <Icon
        color={props.tintColor}
        name={props.iconName}
        size={26}
        />
    </View>
  </View>
  )
}

const styles = {
  container: {
    width: 48,
    height: 42,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
  }
};

export default TabIcon

[uncvrd]

Hey @tmaly1980 so I'm actually running into the same issue, posted about it on Stack Overflow. I tried incorporating your method with no luck. If you have a sec, any thoughts as to why your method doesn't work within my code? https://stackoverflow.com/questions/50057970/icons-do-not-load-in-tab-bar-scene-stack

mostly puzzled by the fact that calling icon={TabIcon} does not run the function in my case..

[tmaly1980]

@uncvrd I'm actually using:

<Scene tabs={true}> rather than <Stack tabs={true}>

Not sure if that makes a difference. Also, are you sure 'timer' is a valid icon in your icon library?

[uncvrd]

@tmaly1980 thanks for the response, unfortunately it doesn't. I put an alert in the TabIcon function to see if it event runs, but nothing is triggered 😢

[tmaly1980]

@uncvrd Just for test sake, try moving TabIcon to a component file. Other than that, I am not sure.

The API actually says it needs to be a component, it might not actually work with functions:

https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#tab-scene-child-scene-within-tabs

[uncvrd]

@tmaly1980 sure do appreciate the suggestion. Moved component to different file, exported it. Then imported it in my route.js and called it in my Scene with icon={TabIcon} with no luck. My code is a carbon copy of yours since you mentioned it worked for you. Guess it just isn't meant to be 🤓

[themakerman]

facing the same problem when updated to latest RNRF

[kaym0]

Is this working yet? Still seems to be an issue for me.

[themakerman]

@kaym0 I checked with my older projects. Its a problem with expo sdk. Anyone else using EXPO here?

[esutton]

@kaym0 This is not an EXPO specific problem.

I am not using EXPO and Tab bar buttons disappear on iOS

[totegsito]

@uncvrd try replacing

<Scene icon={TabIcon} iconName='timer' key="tab1" component={Dashboard} />

with

<Scene icon={() => <TabIcon iconName="timer"/>} key="tab1" component={Dashboard} />

it worked for me.

[esutton]

Upgrading to RN 0.54 or RN 0.55 makes tab bar icons and custom right navigation buttons disappear on iOS only.

Android works normally.

@maltenz work-around to add both width and height to TabIcon solved. Thank you.

Using:
"react": "16.3.1", "react-native": "0.55.4", "react-native-router-flux": "4.0.0-beta.27",

[dextermb]

Just set width and height for Icon as a temporary fix

🤔 💭

[aksonov]

Yes, you have to set width/height, closing this issue

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

[freddneos]

@tmaly1980 thanks for the response, unfortunately it doesn't. I put an alert in the TabIcon function to see if it event runs, but nothing is triggered 😢

Hey man... same here on android...
can you help me ?

[badarshahzad]

@uncvrd try replacing

<Scene icon={TabIcon} iconName='timer' key="tab1" component={Dashboard} />

with

<Scene icon={() => <TabIcon iconName="timer"/>} key="tab1" component={Dashboard} />

it worked for me.

:+1: I like your trick

[theautobot]

width and height not working. is it a working lib? :)