How to use showOverlay within bottomTabs?

[jeremybarbet]

Hi all!

I'm trying to open an overlay using a buttonTab from my bottomTabs. As far as I can see there is no option for it. This is how my bottom tabs look like:

It's a behavior that can be found on iOS apps like YouTube or Reddit with the middle button opening a bottom sheet from any screen you are located at.

I've seen theses issues #6384, #6522 about having a custom component for the bottom tabs but in my case I simply want to use the native bottom tabs and just use a different icon/action to open my overlay.

I was trying to look into the native code and I believe the logic is handled here https://github.com/wix/react-native-navigation/blob/fab85c8ab9bb5ed323f3e005b44078a13195bca5/lib/ios/RNNBottomTabsController.m at least for iOS, I didn't look into Android.

As a workaround, I'm opening an overlay when the app is opened, to show the middle button and use an showOverlay function within the component to open my bottom sheet. I also created an empty component for the middle tab, so the space is created to fit the overlay button in the middle. It's not ideal but that's the only way I found unless I missed something and it's already possible?

If it's not possible natively at the moment, what would it take to make the iOS and Android implementation? Would it requires a lot of code changes to make it work? Any pointers on what to change? I would try digging into the native code if it's not too complicated to implement.

I'm not sure what the API could look like, maybe:

bottomTabs: {
  id: 'BOTTOM_TABS',
  children: [
    {
      stack: {
        id: 'TAB_ONE',
        children: [
          {
            component: {
              id: 'ONE',
              name: 'ONE',
            },
          },
        ],
      },
    },
    {
      stack: {
        id: 'TAB_TWO',
        children: [
          {
            component: {
              id: 'TWO',
              name: 'TWO',
            },
          },
        ],
      },
    },
    {
      stack: {
        id: 'TAB_THREE',
        children: [
          {
            component: {
              id: 'THREE',
              name: 'THREE',
            },
          },
        ],
        options: {
          bottomTab: {
            layout: 'overlay', // 'view' | 'overlay'
          },
        },
      },
    },
    {
      stack: {
        id: 'TAB_FOUR',
        children: [
          {
            component: {
              id: 'FOUR',
              name: 'FOUR',
            },
          },
        ],
      },
    },
    {
      stack: {
        id: 'TAB_FIVE',
        children: [
          {
            component: {
              id: 'FIVE',
              name: 'FIVE',
            },
          },
        ],
      },
    },
  ],
},

[jeremybarbet]

@swabbass Sorry to tag you, would this make more sense to move that as an issue since the discussions doesn't seem to be very active?

[swabbass]

Hey, feel free to tag me :] ... sorry if we did not recognize this, there were bunch of stuff that we are working on these days...I'll review this and discuss it here, so thanks a lot for tagging me.

couple of minutes and I'll respond here.

[swabbass]

For now, your workaround, setting empty tab in the middle, use onTabSelection when middle clicked, set it to the last selection before the new One, and open and overlay/modal will be quite enough.

To do that natively there are a couple of ways:

• The issues you mentioned above might help with this.
• In our library, we can add an option to BottomTabOptions to bypass actual selection, and just call selected tab.
• Any new suggestions are welcome :]

If you wanna contribute and add such functionality, I'll help you with where to start but first, lets agree on an idea and then move on to the implementation. @yogevbd wdyt?