work with react-navigation

[esthor]

Hi. I think this animation is amazing! Any chance you could post an example with it being used with react-navigation?

[ebrahimhassan121]

try this
const BottomContainer = createAppContainer(
createBottomTabNavigator(
{
Main: {
screen: MyDrawerNavigator,
navigationOptions: {
header: null
}
}
},
{ initialRouteName: "Main", tabBarComponent: Tabs }
)
);

[VictorLi08]

1. Create a tab navigator and supply a custom component to tabBarComponent.

const myTabNavigator = createBottomTabNavigator(
  {  // RouteConfigs
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
  },
  {
    initialRouteName: 'Tab1',
    tabBarComponent: FluidTabBar,
  }
);

2. Define your custom component to render TabBar with the values you want. The tab navigator will pass navigation and onTabPress props to your component (along with many others that are irrelevant for this use case); use these to implement the onPress callback to navigate to the appropriate route:

class FluidTabBar extends Component {
  render() {
    return (
      <TabBar
        onPress={(tabIndex) => {
          let route = this.props.navigation.state.routes[tabIndex];
          this.props.onTabPress({route});
        }}
        values={[  // tabs
          {
            title: 'Tab 1',
            icon: require('assets/icon.png')
          }, {
            title: 'Tab 2',
            icon: require('assets/icon.png')
          }
        ]}
      />
    );
  }
}

In this case, pressing a tab in FluidTabBar navigates to a route in RouteConfigs that shares the same array index.

3. Create an app container from your tab navigator and use it as your top-level component.

const myAppContainer = createAppContainer(myTabNavigator)

[pulpdood]

I've forked the code to make it work with react navigation here: https://github.com/pulpdood/FluidBottomNavigation-rn

Make sure you pass props into the component for it to work i.e

tabBarComponent: (props) => <TabBar {...props} />

[BuiChiBach]

@pulpdood , What a wonderful, but when I click back button on Andorid, they are like this
,
first , it's active at Menu button, then i click back button on Andorid, the active status return Home button, and then , it's like below
Can't you fix it :( , thanks !

[pulpdood]

@BuiChiBach Thanks, I've updated the code and I seemed to have fixed it!

Also can I ask how did you make the shadow above the tab bar? I've tried box shadow, elevation etc. but it's not working :(. Thanks!

[BuiChiBach]

Thanks for that you fixed, sorry reply too late, I create shadow on android by using lib : https://www.npmjs.com/package/react-native-simple-shadow-view :D . Hope you like it, <3

…

On Sat, Oct 19, 2019 at 12:39 PM pulpdood ***@***.***> wrote: @BuiChiBach <https://github.com/BuiChiBach> Thanks, I've updated the code and I seemed to have fixed it! Also can I ask how did you make the shadow above the tab bar? I've tried box shadow, elevation etc. but it's not working :(. Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2?email_source=notifications&email_token=AKSMQHUDZSXPSPLVYJKHQGDQPKMQ5A5CNFSM4HR6MSM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBXGBAY#issuecomment-544104579>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKSMQHVTCHRRGFJYORDB2RDQPKMQ5ANCNFSM4HR6MSMQ> .