New feature: change label style

[arasrezaei]

Thanks for bringing native tabs! currently if we use standalone TabView, we could not change style of label text, and can not render custom icons. like if we want to render for example lottie icons. also we do not have rtl support. how could we change direction to RTL?

[okwasniewski]

Hello, thanks for opening the issue.

we could not change style of label text, and can not render custom icons.

What would you like to change when it comes to the style of labels? The native Tab bar sets certain constraints on what can be changed.

Same with custom icons, currently it's not possible to render custom components inside of the tabs (I will investigate adding support for additional types of icons like lottie) but I don't think passing custom components will be supported.

how could we change direction to RTL?

You can try this:

I18nManager.forceRTL(true);

As native components are rendering the views I think RTL should be supported but if not please open a separate issue.

[arasrezaei]

Hello, thanks for opening the issue.

we could not change style of label text, and can not render custom icons.

What would you like to change when it comes to the style of labels? The native Tab bar sets certain constraints on what can be changed.

Same with custom icons, currently it's not possible to render custom components inside of the tabs (I will investigate adding support for additional types of icons like lottie) but I don't think passing custom components will be supported.

how could we change direction to RTL?

You can try this:

I18nManager.forceRTL(true);

As native components are rendering the views I think RTL should be supported but if not please open a separate issue.

For example, font family, color (if not possible), And Also make text always visible not only for active tabs (on android). it's a bummer actually if not possible using custom components :( I used react native tab view before and used lottieView for icons, I don't know if this is possible or not.

[okwasniewski]

@arasrezaei

I did a quick check and it looks like it's possible to support custom fonts + change the size of labels. We can create a feature request for this.

You can control color with current props. You can use tabBarActiveTintColor and tabBarInActiveTintColor.

And Also make text always visible not only for active tabs (on android).

Pass labeled={true} for the navigator. (https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/usage-with-react-navigation.html#labeled)

I used react native tab view before and used lottieView for icons, I don't know if this is possible or not.

Currently it's not. You can either use custom images or vector icons: https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/usage-with-vector-icons.html

For some cases I still recommend to use JS Bottom Tabs, native primitives enforce specific rules that we can't easily change.

[fobos531]

Hello, thanks for opening the issue.

we could not change style of label text, and can not render custom icons.

What would you like to change when it comes to the style of labels? The native Tab bar sets certain constraints on what can be changed.

Same with custom icons, currently it's not possible to render custom components inside of the tabs (I will investigate adding support for additional types of icons like lottie) but I don't think passing custom components will be supported.

how could we change direction to RTL?

You can try this:

I18nManager.forceRTL(true);

As native components are rendering the views I think RTL should be supported but if not please open a separate issue.

@okwasniewski If custom components is not supported, is it perhaps possible to render badges (e.g. unread count for messages) on the icons? That seems like a use-case that could be relatively common

[okwasniewski]

@fobos531 Yes, it's possible you can use tabBarBadge option on the screen.

All of the props and features are described in the docs: https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/usage-with-react-navigation.html#tabbarbadge