Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support showIcon property for Scene Tabs #2892

Closed
kylethebaker opened this issue Feb 19, 2018 · 2 comments
Closed

Support showIcon property for Scene Tabs #2892

kylethebaker opened this issue Feb 19, 2018 · 2 comments

Comments

@kylethebaker
Copy link

kylethebaker commented Feb 19, 2018

EDIT: Turns out applying the showIcon prop works for me with the underlying version of react-navigation that I have, I'm not sure what was going on with this before but I can't reproduce now so I'm going to close.

Version

  • react-native-router-flux v4.0.0-beta25
  • react-native v0.51

Expected behaviour

showIcon property should exist for tabbed scenes, just like showLabel does. React Navigation supports this feature: (see code here).

I think this might just be a matter of passing through the showIcon prop (I'm not sure if it only passes through some whitelisted properties from <Scene> to the underlying React Navigation calls)

If you leave icon as it's default (undefined) it will still inherit the icon props from any parent scene (in my case I have nested <Tabs>). If you create a 'no-op' component (() => null) to use as the icon it will still render the container for the icon which effects the container size and label positioning. So in order to have icon-less tabs we'd need this feature supported.

@kylethebaker
Copy link
Author

My hunch is that we just need to let showIcon pass through to the createTabBarOptions() function in navigationStore.js

See here: https://github.com/aksonov/react-native-router-flux/blob/master/src/navigationStore.js#L110

I will see if this works and put together a PR if so.

@kylethebaker
Copy link
Author

The showIcon prop on the TabBar component is only supported in newer versions of react navigation. Currently in router flux there is no way to hide the icons (that I can find at least). I've tried using a 'null component' (() => null) or undefined as my icon prop, but all of the padding and containers are still added which still leaves an empty space where the icon would be (it still renders the <TabBarIcon> component).

My workaround for now is to copy TabBarBottom from the latest release of react-navigation and use it as a custom component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant