React-native-navigation: FR: Allow disable some tabs

[brunolemos]

My use case is that when the user haven't completed 100% of the signup (or his profile has been rejected/changes requested), he has access to 2 tabs and the other 2 should be grayed out and disabled (no press handler). We don't want to hide the tabs, only disable some, because we want them to transition to not-gray after he completes the signup.

I don't see any way to disable some specific tabs on react-native-navigation.
I see it's possible to change their icon, but not disable the press handler.

[guyca]

@DanielZlotin What do you think about adding ability to handle BottomTab click in Js?

options: {
  bottomTab: {
    title: 'Tab 2',
    icon: require('../images/two.png'),
    onPress: (index) => console.log(`tab ${index} clicked`)
  }
}

[DanielZlotin]

That was part of the initial roadmap but we postponed it..
Then if the onClick is provided we do nothing in native?
If we gonna add this now, we should probably add the onClick on any buttons (topbar, toptabs etc) as a function as well. (while still supporting the other methods)

[guyca]

Right, if onClick is provided we don't handle the click in native. But in this case, should we rename it to clickHandler? To better reflect that this method handles the click and is not just a regular listener/callback.

[DanielZlotin]

How about onClickHandler

On Feb 22, 2018 13:49, "Guy Carmeli" [e-mail] wrote:

Right, if onClick is provided we don't handle the click in native. But in
this case, should we rename it to clickHandler? To better reflect that
this method handles the click and is not just a regular listener/callback.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/2766#issuecomment-367656961,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGWgj_GFyXIKQHRhEBPkKqWzstDKrJrLks5tXVRSgaJpZM4SOILo
.

[guyca]

Sounds good

[brunolemos]

If I understood correctly:

• Add the onClickHandler prop (or onPress, ...)
  
  
  
  • Native will change tab only if this prop is undefined
  
  
  • The handler will probably pass the tabIndex so user can switch tab if he wants
  
  
  • No way to provide default styling for disabled tabs?
  
  

How about:

• Add a disabled prop
• Add tabBarDisabledButtonColor and other props to provide styling for disabled tabs (just like it does for selected tabs)

The disabled prop alone would solve this issue but I see you want to make it more flexible.

[guyca]

I'm a bit hesitant to support enabled property for bottom tabs as this is pretty much a UX anti pattern. For a reason known only to you (and your product manager), a bottom tab is disabled. The user clicks on it without getting any feedback (it's disabled dah..) and this kind of sucks.

I couldn't find anything about this in the design guidelines on Android.

Honestly, I think if a user should be logged in and a tab that required login is visible - show an empty state encouraging the user to login.

[brunolemos]

Oks the other solution should be enough

[stale[bot]]

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.

[brunolemos]

@stale don't

[Dallas62]

+1 for onClick feature
It will also allow us to implement some library such as react-native-intercom with a press on the Tab.

[Burnsy]

Any progress on this for v2? Thank you!

[jayeshanandani]

Any update? This seems like a great add on :)

[Maksym5248]

Are there any updates ?

[pacozaa]

I am looking forward to this improvement as well.

[guvenakcoban]

+1 I need this improvement.

[eightyfive]

This feels like an anti UX pattern to me.

What I did in your case:

... when the user haven't completed 100% of the signup ...

Is to show/mount a blocking "Onboard" stack app if user profile is not yet ready. I only show the "Main" bottomTabs app when the user profile is completed.

Hope this helps!

[eightyfive]

Hi @guyca

You seem to point back to this issue to track progress about a custom click handler for tabs:
https://github.com/wix/react-native-navigation/issues/3204#issuecomment-388881806

Can we have a timeline please? A guess?

Opening a Modal from the central tab is a very common UX pattern (Instagram), while not critical that would be a nice feature to have!

Thanks for the lib and your time as usual.

[AbanoubNassem]

any updates on this issue?

[akhan118]

Any work around for this ?

[eightyfive]

https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable. For example, if there are no songs on an iOS device, the My Music tab in the Music app explains how to download songs.

[guyca]

Fixed by https://github.com/wix/react-native-navigation/issues/5545