Usage with react-navigation: Proper use of the module

Angelk90 commented 6 years ago

What kind of Issue is this?

Discussion

Hi @timomeh , I wanted to try the new version of the module, but I'm having some doubts about how to use it in the right way.

I have three screens, in which every one of them has to refer to the tab, but I have to use react-navigation. So which is the right use?

I tried createMaterialBottomTabNavigator, but it does not graphically reflect the module I would like to use as graphics, I prefer this.

Could you post some code examples?

Actual behavior

Is it happening on Android, iOS or both? Android

Environment

software	version
react-native-material-bottom-navigation	1.0.0
react-native or expo	0.55.4, latest version
node	latest version
npm or yarn	latest version

timomeh commented 6 years ago

Hi! You maybe already read the section in the README about React Navigation Support, see here.

I don't think there is "a right way" to use react-navigation together with this Bottom Navigation. You could build your own Navigation View (read more), or you could simply use the Bottom Navigation on the Top Level (read more).

I don't have any working code examples at hand since I'm currently not working on any project which uses react-navigation. If I would use react-navigation together with the Bottom Navigation, I'd use it in the Top Level Component (here) together with a Stack Navigator, and onTabPress would dispatch a StackActions.reset Event.

⚠️ Warning, dangerous pseudo code, just for demonstration purposes:

import { StackActions, NavigationActions } from 'react-navigation'

const AppNavigator = createStackNavigator(SomeAppRouteConfigs)

class App extends React.Component {
  handleTabPress = newTab => {
    this.navigator && this.navigator.dispatch(
      StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: newTab.key })]
      })
    )
  }

  render() {
    return (
      <View>
        <AppNavigator ref={nav => { this.navigator = nav }} />
        <BottomNavigation
          activeTab={this.navigator.state.routeName}
          tabs={[ /* ... */ ]}
          onTabPress={this.handleTabPress}
          // ...
        />
      </View>
    )
  }
}

If you implemented it in some way, feel free to post your solution so other people can learn from it. Then I could also use your solution and put it in the docs, or maybe you want to contribute directly and add it to the docs. Thanks!

Note: I'm going to close this issue since it's not an active bug or something similar. You can still comment below, and I'll still answer.

Angelk90 commented 6 years ago

@timomeh : I'm trying to create an example on expo, but there's something wrong. link: https://snack.expo.io/HJ0lsgOGm

Let me know where I'm wrong.

timomeh commented 6 years ago

As I stated, my code example was just some pseudo code to demonstrate how it would all fit together. It won't work as-is.

You need to check:

Your route names must equal to the key of the tabs (notice that your Route Names begin with an uppercase letter and the tab keys are lowercase)
I doubt that this.navigator.state.routeName really exists – it was just some pseudocode I wrote. (If it exists, it was just a lucky guess.) You need to take a look into this.navigator and see where you get the current route name.
The ref this.navigator doesn't exist in the first render since the ref is only being executed after the render, so using activeTab={this.navigator...} won't work in the first render.

Maybe you also need to handle your own state of the active screen inside App and keep it in sync with the navigator's state, instead of relying on the state of the navigator. App needs to re-render if the route changes, so that the BottomNavigation also gets updated if a route changes. I don't think this.navigator.dispatch() will call a re-render – handling your own state inside App could solve that.

timomeh commented 6 years ago

Also keep in mind that I currently have no deep experience in working with react-navigation. I don't know the current state of it, and how you would do different things. For more details on react-navigation integration I might be the wrong person to ask.

timomeh / react-native-material-bottom-navigation