Custom components for Bottom Tabs

[eurobob]

Can we please have some more flexibility than just an icon and some text?

It really would make a lot of sense to enable the ability to use a JS component as a tab item. My current project requires animations which I'm using Lottie to implement.

This library doesn't support anything but the most basic bottom tab layout.

[jinshin1013]

Hi @eurobob 🙌 a great suggestion! Keep in mind that there are only 2 developers actively working on the library so community contribution will be really appreciated. If someone could take the lead on this that will be awesome!

[eurobob]

@jinshin1013 I'm happy to help out with this, but might need a bit of direction as to which files I should be looking at editing. I'm not very familiar with Swift or Java, and the project is quite intense!

[eurobob]

I need this functionality urgently now. I tried to switch to react-navigation but the animation performance is so bad. I can't afford for such poor UX.

@jinshin1013 If you could please at least give me some direction as to what files/functions I should be concerned with I would be happy to create a PR for this, but I simply do not have the time to wrap my head around such a large codebase in order to implement what is hopefully be a rather simple change

[AlphaJuliettOmega]

@eurobob Did you end up finding a work-around to customize your Bottom Tabs?

[AlphaJuliettOmega]

@jinshin1013 any advice re. how/where this should be implemented to match existing code/future plans would be much appreciated.

[eurobob]

@eurobob Did you end up finding a work-around to customize your Bottom Tabs?

Ditched the package and switched to react-navigation which offers more customisation in that regard

[ashu090990]

Any update on this? I need this feature as design has been changed in existing project, I can not afford to switch to react navigation at this moment.

[swabbass]

Hey all sorry for the inconvenience :] we are having a lot of cool feature requests to implement, since we are in a limited capacity it would be nice if you have the time to contribute, and implement, and we will offer the help on how to do that from A-Z.

[AlphaJuliettOmega]

@ashu090990 I found a way to create a Custom bottombar in RNN, It's a 4 part solution.

(This is a temporary solution as I predict custom bottomtabs JSX will be a feature eventually, so the component I made will be useful later)

1. Navigation stack id holder singleton

class NavigationState {
  currentNavStack: string = stackIds.home;
}
/**
 * The current Navigation session singleton.
 * @type {Session}
 */
export const navigationState = new NavigationState();

This needs to be updated in ComponentDidAppear, with the name of the current stack, so that you can Push screens to the correct stack.

2. Bottombar component on every screen that you want to tab from.

3. Navigate with your custom bottombar using .mergeOptions to switch tabs

  navigateOne() {
    Navigation.mergeOptions(this.props.passedComponentId, {
      bottomTabs: { currentTabIndex: 0 }
    });
  }

  navigateTwo() {
    Navigation.mergeOptions(this.props.passedComponentId, {
      bottomTabs: { currentTabIndex: 1 }
    });
  }

4. disable BottomTabs somewhere you should have a .setDefaultOptions, inside the options add a key:

 bottomTabs: {
  visible: false
},

[swabbass]

@AlphaJuliettOmega looks cool, the essence of your solution is to place a ReactComponent as a bottom bar on every screen, and manage its state :]. a good workaround, maybe as a feature we can register a component as a bottom bar so there will be no need to place it everywhere, in JSX, and its state can be mapped to the native tabs navigator. That will enable the users to have fully customizable BottomTabs.

[ptfly]

Couple of year back I've PoC'd the solution with a custom component. There was like 98% success rate. The rest went nuts. My main issue was to capture the event where some pushed/popped screens might be configured to hide/show the bottomTabs bar. I needed that event in order to hide/show my custom component. Unfortunately, back then (I don't recall the details) but wasn't able to do so.

Now, I'm trying to go with the same approach. What puzzles me is that visible:bool no longer works when set as default option. The only way to make it works is to set it in the options of its tab stack element. At least on version 7.18.1. Is there anyone else that is experiencing the same issue, the inability to hide bottomTabs?

[swabbass]

@ptfly hmm, we might host ReactComponent on each tab or replacing the bottom bar, we just need to study the case and discuss it, either way, it will enable more dynamic usage of RNN, fancy designs sometimes needs to control the whole bottom bar, some need just tabs, so, we need to study the whole thing and then implement it, and for sure we are taking what you wrote here in this ticket into consideration.

About the issue of visibility, can you kindly open a new issue and tag me? (with a reproducible demo, or try within our playground).

[ptfly]

@swabbass having a react component for the button will definitely help with what I'm (most of us is) trying to achieve. Will try the visibility issue on the playground and will report back.

Edit: OMG, stupid me, a screen responsible for one of the tabs had props set to force bottom tabs to be visible :) That's why default option wasn't working. Sorry for the confusion!

[saad277]

had to use this : https://www.npmjs.com/package/react-native-tab-view for custom bottom tabs since wix/react-native-navigation bottom tabs had very less support . My tabs also needed support for light and dark theme so had to improvise

[Ainias]

Couple of year back I've PoC'd the solution with a custom component. There was like 98% success rate. The rest went nuts. My main issue was to capture the event where some pushed/popped screens might be configured to hide/show the bottomTabs bar. I needed that event in order to hide/show my custom component. Unfortunately, back then (I don't recall the details) but wasn't able to do so.

Now, I'm trying to go with the same approach. What puzzles me is that visible:bool no longer works when set as default option. The only way to make it works is to set it in the options of its tab stack element. At least on version 7.18.1. Is there anyone else that is experiencing the same issue, the inability to hide bottomTabs?

I would be interested in your solution. Did it work and do you want to share your component?

[crherman7]

I did a POC utilizing an overlay + default options with bottomsTabs.visible: false. I had a controller that listened for Navigation.events() to track external + internal bottom tab changes via the mergeOptions command to animate my custom tab with respect to tab selected. It seemed to work well. I can give more details if requested. There are definitely some edge cases that you would need to be aware of in your app, i.e. dismissAllOverlays() should be avoided, overlay will show over react native dev menu, hiding overlay when modal shows, etc.

[cmdominguez]

https://github.com/cmdominguez/react-native-custom-bottom-tabs @eurobob tal vez les pueda servir