Support passing custom style to TabController.TabBarItem

[ethanshar]

Description

Support passing custom style to TabController TabBarItem

Changelog

Support passing custom style prop in TabController.TabBar items

[lumotroph]

Thanks for this change @ethanshar - just checking something with you:

If I now want to change the colours of different tabs (or some other style in the tab bar), how can the style be passed to the TabController component's TabController.TabBar without manually supplying TabBarItems?

I tried to loop through my TabBarItems and define a labelColor there, but I get the warning message:

Please pass the "items" prop to TabController.TabBar instead of children

Any tips?

Thanks!

[ethanshar]

items is a prop you pass to TabController and is an array of objects that represent TabBarItem

Try this..

<TabController items={[{label: 'tab1, labelStyle: {...}}, {label: 'tab 2'}]} ....

[bneigher]

@ethanshar

This doesn't allow us to use the TabController.TabBarItem component at all though... right? Why is it in the docs? Also this example seems to have HAD it:
https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx#L158

But its commented out and the function doesn't exist.

Please advise, trying to render my own tab icons

[bneigher]

Relying on the limited Item Style doesn't allow us to really customize the look and feel. For example:

I can't even use my own icons here as RNUI is trying to set the color's active / non active. These are supposed to be my pngs. Are the options to disable this behavior?

[dojoVader]

@ethanshar

This doesn't allow us to use the TabController.TabBarItem component at all though... right? Why is it in the docs? Also this example seems to have HAD it: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx#L158

But its commented out and the function doesn't exist.

Please advise, trying to render my own tab icons

Did you ever get this working ? I can't seem to render SVG only PNG

[bneigher]

I ended up patching the TabController with my own version which allows me to pass in a Component instead of a style. Unfortunately it's a major pain-point as there have been some core changes to the repo and it's not worth sharing. My advice would be to take the current version, write in the ability to pass in a custom component, and handle any component changes yourself.

I do think it would be very nice if this was supported though. Custom component would solve a lot of problems and make the tab item feature a lot more useful.