Work with react-native-router-flux

[injas427]

Work with react-native-router-flux

[injas427]

@decarlomw Thanks for your query. I haven't tested it on react-native-router-flux it would be possible if you can use custom bottom tab in react-native-router-flux. i've tested it on react-navigation and it worked perfectly. If you could make it possible you can share the example here, it would be helpful to others

[decarlomw]

react-native-router-flux just doesn't have the workings to support this navigation. I did get react-navigation to show the tab bar but I am having issues with getting the pages to render. If I do the createBootomTabNavigator and add tabBarComponent:Tabs how do I get the pages to render in fluidbottomnavigation? Currently I'm just outputting the index to the console.

[injas427]

const TabComponent = props => <BottomtabBar {...props} /> //Bottomtabbar component is your bottom tab with fluidbottomnavigation

const bottomTab = createBottomTabNavigator({
    Tab1: Tab1Stack,
    Tab2: Tab2Stack,
    Tab3: Tab3Stack,
    Tab4: Tab4Stack
}, {
        tabBarComponent: props =>
            <TabComponent
                {...props}
            />,
        initialRouteName: "Tab1"

    })

const Routes = createAppContainer(bottomTab)
export default Routes

and in your bottom tab, onPress callback will return tabIndex

const { state } = props.navigation

props.jumpTo(state.routes[tabIndex].key)

Number of icons should be equal to number of tabs defined in createBottomTabNavigator