How to implement react-navigation stack/bottomTab navigator using back buttons instead of tabs to navigate?

Question

I have implemented a react native application that currently does not use any type of navigation. I want to implement react-navigation but am struggling to recreate what I already have. Below I have added some images below to give an example of what I currently have without react-navigation. I would like to replicate this exactly using react-navigation.

This is the home screen: https://ibb.co/XWxCpwt

This it the right tab view (the left tab view button changes to a back button): https://ibb.co/XzFB8v8

This is the left tab view (the right tab view button changes to a back button): https://ibb.co/zP2ZBK5

I want to make it clear that the center bottom button has nothing to do with showing the center view. It has a completely different functionality. And that is the reason why I would like the back buttons to work this way.

This is a little snippet from my App.js file. Without react-navigation everything above the exported class would be commented out. I have not spent much time trying to figure this out as I already did not have much luck trying to implement with react-native-navigation. Any help would be appreciated!

const TabNavigator = createBottomTabNavigator({
  Community: Community,
  Root: Root,
  Network: Network
});

const RootStack = createStackNavigator({
    Root: Root
});

const Navigation = createAppContainer(TabNavigator);

// Everything above this line would normally be commented out and <Root /> would
// be inside the exported class instead of <Navigation />

export default class App extends Component {
  render() {

    return (
        <Provider store={persistStore.store} >
            <PersistGate loading={null} persistor={persistStore.persistor}>
                <Navigation />
            </PersistGate>
        </Provider>
    );
  }
}

I have updated my App.js. This is the closest I was able to get thus far. The next steps needed are to configure the tabs to not show the view currently linked to the tab upon click, but to instead change to back buttons to return a user to the home screen (the Root component). The desired navigation look of this app is to feel like there are three views sitting side by side. The user can only navigate one view at a time and cannot skip between.

const TabNavigator = createBottomTabNavigator({
    Community: Community,
    Home: Root,
    Network: Network
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: {
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />
        }
    }
});


const Navigation = createAppContainer(RootStack);

Answer 1

I was able to solve my configuration problem with this solution. The key was to use the tabBarComponent to render my custom tab bar. I then passed the navigation prop to the buttons. I then implemented my own navigation logic using this.props.nav.navigate('Community') (in my case I passed the navigation prop as 'nav'). This seems to be working well atm, there is a small issue with the Rootstack rendering slightly up and sliding down each time it is navigated to.

const HomeStack = createDrawerNavigator({
    Root: Root,
    Profile: Profile
},{
    initialRouteName: 'Root',
    drawerWidth: SCREEN_WIDTH,
    contentComponent: props => (
        <ProfileSidebar drawerNavigator={props.navigation}/>
    )
});

const TabNavigator = createBottomTabNavigator({
    Community: {
        screen: Community
    },
    Home: HomeStack,
    Network: {
        screen: Network
    }
},{
    initialRouteName: 'Home',
    tabBarComponent: props => (
        <View style={styles.nocturnFooter}>
            <NavButton nav={props.navigation}/>
            <NocturnButton />
            <CommunityButton nav={props.navigation}/>
        </View>
    ),
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: ({ navigation }) => ({
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />,
            headerTransparent: navigation.state.index == 1 ? true : false,
            headerStyle: navigation.state.index != 1 ? {
                backgroundColor: '#000000'
            } : {}
        })
    }

});


const Navigation = createAppContainer(RootStack);