Custom React component for bottom tabs

[zabojad]

🚀 Feature

We already have the possibility to have a custom React component as TopBar which is cool and a very common use case in my opinion.

Another very common use case would be to use a custom React component as bottom tabs. It could be done in a similar way that the React Navigation lib is offering this feature, ie: give the possibility to the user to build its own bottom tabs component that would receive via its props the information about current index, etc...

Motivation

The current Bottom tabs component is nice but does not offer enough customization to be widely adopted. We already have the possibility to use a custom react component as TopBar, we could have the same for the BottomTabs...

Pitch

We should have the same as for the TopBar, ie:

In the RNN options, we specify:

Navigation.setDefaultOptions({
  topBar: {
    title: {
      component: { name: 'MyTopBar' }
    }
  }
});

We should also be able to do this:

Navigation.setDefaultOptions({
  bottomTabs: {
    component: { name: 'MyBottomTabs' }
  }
});

Then, the custom component should receive via its props the information about the tabs labels, pictures, etc... and the current index.

Are you willing to resolve this issue by submitting a Pull Request?

Yes, I have the time, but I don't know how to start. I would need a lot of guidance.

[zabojad]

@guyca Sorry to disturb but could you give me some guidance so that I implement it?

[geroale]

Same issue here.

[kkovax25]

Any possible update on this by any chance?

[hellforever]

@zabojad This is very good example that how React Navigation lib implements it. Will RNN library support this feature? https://stackoverflow.com/questions/62052506/navigate-to-the-screen-when-tab-on-bottomtabnavigator-is-pressed