React-native-navigation: [ENHANCEMENT] Support custom components for Bottom Tabs

Created on 31 Aug 2020 · 11Comments · Source: wix/react-native-navigation

Problem

Currently the BottomTabs TabBar can only render Icons and Text (labels) which are rendered using the native TabBar implementations. If I wanted to implement something like this:

or this:

It would simply not be possible. A very wacky workaround would be to create an overlay the same time the bottom tabs are rendered, which is exactly positioned over the bottom Tabs. This has many issues though:

Requires a lot of code (especially to manage appearance/disappearance in root replacements, bottomTabs visibility changes, e.g.)
Doesn't work with Modals (goes above)
Has issues with transparency (shadows, button pressed animations such as scale, opacity, ..)
Doesn't work with bottom tabs animations (e.g. visible -> not visible slide animation)

Solution

A clean solution would be a component prop in the bottomTab API.

Example usage:

bottomTab: {
    component: () => <MyAddButton/>,
},

bottomTab: {
    component: {
        name: 'MyAddButton'
    },
},

acceptediscussion

Source

mrousavy

👍14 🚀7

Most helpful comment

This is not stale

stereodenis on 12 Oct 2020

👍8

All 11 comments

I wonder if thats compatible with the motto of rnn to use native components for navigation. Maybe it would be better allowing users to override any native rnn components with their own instead of adding solutions that don't exist in the native framework.

danilobuerger on 1 Sep 2020

@danilobuerger Well the topBar also supports adding custom components via overlays which work pretty well with animations, I'd imagine the bottomTab to support the same. I'm not sure if stuff that overflows causes any issues tho 🤔

mrousavy on 1 Sep 2020

👍2

I mean a good start would be to at least implement events for bottomTabShow and bottomTabsHide to enable implementing an overlay yourself. We have the same design challenge and solving it would have been much easier when these events would be available to trigger synchronised appearance and disappearance with bottom tabs of custom overlays.

nenti on 6 Sep 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.