Open esthor opened 5 years ago
try this const BottomContainer = createAppContainer( createBottomTabNavigator( { Main: { screen: MyDrawerNavigator, navigationOptions: { header: null } } }, { initialRouteName: "Main", tabBarComponent: Tabs } ) );
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,
}
);
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.
const myAppContainer = createAppContainer(myTabNavigator)
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} />
@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 !
@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!
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 notifications@github.com 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 https://github.com/10clouds/FluidBottomNavigation-rn/issues/2?email_source=notifications&email_token=AKSMQHUDZSXPSPLVYJKHQGDQPKMQ5A5CNFSM4HR6MSM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBXGBAY#issuecomment-544104579, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKSMQHVTCHRRGFJYORDB2RDQPKMQ5ANCNFSM4HR6MSMQ .
Hi. I think this animation is amazing! Any chance you could post an example with it being used with react-navigation?