Is there any way to use this with @react-navigation v5 ?

[natashkela]

I'd like to use this package with @react-navigation v5 which is the latest version. I am sure I am not the only one. My App.js looks like this - any suggestions?

import 'react-native-gesture-handler';
import React,{Component} from 'react';
import {AppState} from 'react-native';
import {connect} from 'react-redux';
import Home from './app/screens/Home/Home';
import ArtistListing from './app/screens/ArtistListing/ArtistListing';
import ArtPeriods from './app/screens/ArtPeriods/ArtPeriods';
import Login from './app/screens/Login/Login';
import Quiz from './app/screens/Quiz/Quiz';
import GuessWhen from './app/screens/GuessWhen/GuessWhen';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {Auth, Hub} from 'aws-amplify';
import {GetUserFromDB, SetCurrentUser, SetLoggedOutUser} from './src/model/User';
import LearnMore from './app/screens/LearnMore/LearnMore';
import {CreateAllArtistsWithDependencies} from './src/model/Artists';
import ExploreTimePeriod from './app/screens/ExploreTimePeriod/ExploreTimePeriod';
import ExploreArtist from './app/screens/ExploreArtist/ExploreArtist';
import PhotoGalleryScreen from './app/screens/PhotoGalleryScreen/PhotoGalleryScreen';
import ExploreTimePeriods from './app/screens/ExploreTimePeriods/ExploreTimePeriods';
import ExploreArtists from './app/screens/ExploreArtists/ExploreArtists';
import QuizSummary from './app/screens/QuizSummary/QuizSummary';
import ContactUs from './app/screens/ContactUs/ContactUs';
import Profile from './app/screens/Profile/Profile';
import Favorites from './app/screens/Favorites/Favorites';
import Logout from './app/screens/Logout/Logout';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function stackNavigation (){
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
            <Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>
            <Stack.Screen name="ArtPeriods" component={ArtPeriods} options={{headerShown:false}}/>
            <Stack.Screen name="GuessWhen" component={GuessWhen} options={{headerShown:false}}/>
            <Stack.Screen name="Quiz" component={Quiz} options={{headerShown:false}}/>
            <Stack.Screen name="LearnMore" component={LearnMore} options={{headerShown:false}}/>
            <Stack.Screen name="ExploreTimePeriod" component={ExploreTimePeriod} options={{headerShown:false}}/>
            <Stack.Screen name="ExploreTimePeriods" component={ExploreTimePeriods} options={{headerShown:false}}/>
            <Stack.Screen name="PhotoGalleryScreen" component={PhotoGalleryScreen} options={{headerShown:false}}/>
            <Stack.Screen name="ExploreArtist" component={ExploreArtist} options={{headerShown:false}}/>
            <Stack.Screen name="ExploreArtists" component={ExploreArtists} options={{headerShown:false}}/>
            <Stack.Screen name="QuizSummary" component={QuizSummary} options={{headerShown:false}}/>
            <Stack.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
            <Stack.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
            <Stack.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>
        </Stack.Navigator>
    );
}
//adding the key currentUser to the props and setting it to the state's value of current user
const mapStateToProps = (state) => {
    return {
        currentUser: state.currentUser
    }
};
class App extends Component {

    constructor(props){
        super(props);
        Hub.listen("auth", ({ payload: { event, data } }) => {
            switch (event) {
                case "signIn":
                    SetCurrentUser();
                    break;
            }
        });
    }

    render() {
        return (
            <NavigationContainer>
                {this.props.currentUser.hasOwnProperty('username') ? <Drawer.Navigator>
                        <Drawer.Screen name="Take a Quiz" component={stackNavigation} unmountOnBlur={true} options={{headerShown: false, unmountOnBlur:true}}/>
                        <Drawer.Screen name="Profile" component={Profile} options={{headerShown: false}}/>
                        <Drawer.Screen name="Explore Time Periods" component={ExploreTimePeriods}
                                       options={{headerShown: false}}/>
                        <Drawer.Screen name="Discover Artists" component={ExploreArtists} options={{headerShown: false}}/>
                        <Drawer.Screen name="Favorites" component={Favorites} options={{headerShown: false}}/>
                        <Drawer.Screen name="Contact Us" component={ContactUs} options={{headerShown: false}}/>
                        <Drawer.Screen name="Logout" component={Logout} options={{headerShown: false}}/>
                    </Drawer.Navigator> :
                    <Stack.Navigator>
                        <Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
                    </Stack.Navigator>
                }
            </NavigationContainer>
        );
    }
};

export default connect(mapStateToProps)(App);

[dsolimando]

I have one, adapt the library yourself to support @react-navigation v5. It's open source...

[ArvindKer90]

I know it's too late, but I didn't get a solution anywhere, thus gone through @react-navigation v5 doc and upgrade from v4 to get solution my own.

Splash screen

//TODO:- imports
import React, { Component } from 'react';
import { StatusBar, View, Text, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';

//TODO:- splash class
class Splash extends Component {
    //TODO:- constructor
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    //TODO:- class life cycle
    componentDidMount() {
        console.disableYellowBox = true;
        var that = this;
        setTimeout(function () {
            that.getInitialRoot("AppNavigation");
        }, 3000);
    }

    //TODO:- other functions
    getInitialRoot = (screen_to_load) => {
        setTimeout(() => {
            this.props.navigation.navigate(screen_to_load);
        }, 200);
    }

    //TODO:- render event
    render() {
        return (
            <SafeAreaView style={{ flex: 1, width: '100%' }}>
                <StatusBar backgroundColor="#fff" barStyle='light-content' />
                <View style={{ flex: 1, width: '100%', backgroundColor: "#fff", alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ color: 'grey', fontSize: 22, fontWeight: '600', }}> Splash </Text>
                </View>
            </SafeAreaView>
        );
    }
}

export default connect(
    null,
    null,
)(Splash);

Dashboard screen

//TODO:- imports
import React, { Component } from 'react';
import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import drawer from "../../navigation/drawer_navigation/drawer_ref";

//TODO:- dashboard class
class Dashboard extends Component {

  //TODO:- constructor
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  //TODO:- render event
  render() {
    return (
      <SafeAreaView style={{ flex: 1, width: '100%' }}>
     
        <View style={{ flex: 1, width: '100%', backgroundColor: "#fff", alignItems: 'center', justifyContent: 'center', }}>
          <TouchableOpacity style={{ height: 40,  alignItems: 'center', justifyContent: 'center', }}
            onPress={() => {
              drawer.current.open();
            }}
          >
          <Text style={{ color: 'grey', fontSize: 22, fontWeight: '600', textDecorationLine: 'underline'}}> Open Drawer </Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

export default connect(
  null,
  null,
)(Dashboard);

Sidemenu screen

//TODO:- imports
import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';

//TODO:- sidemenu class
export default class SideMenu extends Component {

    //TODO:- constructor
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    //TODO:- render event
    render() {
        return (
            <SafeAreaView style={{ flex: 1, width: '100%' }}>
                <View style={{ flex: 1, width: '100%', backgroundColor: "#fff", alignItems: 'center', justifyContent: 'center', }}>
                    <Text style={{ color: 'grey', fontSize: 22, fontWeight: '600', }}> SideMenu </Text>
                </View>
            </SafeAreaView>
        );
    }
}

Drawer ref

import React, { Component, createRef } from "react";
const drawer = createRef();
export default drawer;

Drawer navigation

//TODO:- imports
import React, { Component } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import ScalingDrawer from "react-native-scaling-drawer";
import drawer from './drawer_ref';
import Dashboard from '../../screens/dashboard';
import Screen1 from '../../screens/screen1';
import Screen1Detail from '../../screens/screen1_detail';
import Screen2 from '../../screens/screen2';
import Screen2Detail from '../../screens/screen2_detail';
import SideMenu from '../../screens/sidemenu';

//TODO:- dashboard stack
const DashboardStack = createStackNavigator();
function DashboardStackFunc() {
    return (
        <DashboardStack.Navigator>
            <DashboardStack.Screen name="Dashboard" component={Dashboard} />
        </DashboardStack.Navigator>
    );
}

//TODO:- screen1 stack
const Screen1Stack = createStackNavigator();
function Screen1StackFunc() {
    return (
        <Screen1Stack.Navigator>
            <Screen1Stack.Screen name="Screen1" component={Screen1} />
            <Screen1Stack.Screen name="Screen1Detail" component={Screen1Detail} />
        </Screen1Stack.Navigator>
    );
}

//TODO:- screen2 stack
const Screen2Stack = createStackNavigator();
function Screen2StackFunc() {
    return (
        <Screen2Stack.Navigator>
            <Screen2Stack.Screen name="Screen2" component={Screen2} />
            <Screen2Stack.Screen name="Screen2Detail" component={Screen2Detail} />
        </Screen2Stack.Navigator>
    );
}


//TODO:- app drawer stack
const AppDrawerNavigator = createStackNavigator();
function AppNavigator() {
    return (
        <AppDrawerNavigator.Navigator>
            <AppDrawerNavigator.Screen name="Dashboard" component={DashboardStackFunc} options={{ headerShown: false, gesturesEnabled: false }} />
            <AppDrawerNavigator.Screen name="Screen1" component={Screen1StackFunc} options={{ headerShown: false, gesturesEnabled: false }} />
            <AppDrawerNavigator.Screen name="Screen2" component={Screen2StackFunc} options={{ headerShown: false, gesturesEnabled: false }} />
        </AppDrawerNavigator.Navigator>
    );
}

//TODO:- default scaling drawer config
const defaultScalingDrawerConfig = {
    scalingFactor: 0.6,
    minimizeFactor: 0.6,
    swipeOffset: 20
};

//TODO:- app navigation class
export default class AppNavigation extends Component {

    //TODO:- constructor
    constructor(props) {
        super(props);
    }

    //TODO:- render event
    render() {
        return (
            <ScalingDrawer
                frontStyle={{ backgroundColor: "black" }}
                ref={drawer}
                content={
                    <SideMenu drawer={drawer} navigation={this.props.navigation} />
                }
                {...defaultScalingDrawerConfig}
            >
                <AppNavigator
                    onStateChange={(state) => console.log('New state is', state)}
                />
            </ScalingDrawer>
        );
    }
}

Switch navigation

//TODO:- imports
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Splash from '../../screens/splash';
import Login from '../../screens/login';
import AppNavigation from '../drawer_navigation';

//TODO:- app stack
const AppStack = createStackNavigator();
function SwitchNavigation() {
  return (
    <NavigationContainer>
      <AppStack.Navigator>
        <AppStack.Screen name="Splash" component={Splash} options={{ headerShown: false, gesturesEnabled: false }} />
        <AppStack.Screen name="Login" component={Login} options={{ headerShown: false, gesturesEnabled: false }} />
        <AppStack.Screen name="AppNavigation" component={AppNavigation} options={{ headerShown: false, gesturesEnabled: false }} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}
export default SwitchNavigation;

Hope this might help others.