upgrading my project to react navigation v5

Am working on my first react native project and after I put in many hours building my react navigation (version 4) setup and working on the different screens and components I came across a material design library called react native paper which offers some really cool looking components that will make my app look better so I started by trying to add the bottom nav bar, but it didn't work so I looked around only to find out that it goes along with the react native navigation v5 so is there a way to use react native bottom nav bar component from react paper with the version 4 of react navigation?if not how can i convert all the code to the version 5 syntax ?

here is my app.js file :

import React from "react";import { StyleSheet, Text, View } from "react-native";import { createAppContainer, createSwitchNavigator } from "react-navigation";import { createStackNavigator } from "react-navigation-stack";import { createBottomTabNavigator } from "react-navigation-tabs";import AccountScreen from "./src/screens/AccountScreen";import SigninScreen from "./src/screens/SigninScreen";import SignupScreen from "./src/screens/SignupScreen";import TrackCreateScreen from "./src/screens/TrackCreateScreen";import MainScreen from "./src/screens/MainScreen";import ResultShowScreen from "./src/screens/ResultsShowScreen";import { Provider as AuthProvider } from "./src/context/AuthContext";import { setNavigator } from "./src/navigationRef";import ResolveAuthScreen from "./src/screens/ResolveAuthScreen";const switchNavigator = createSwitchNavigator({  ResolveAuth: ResolveAuthScreen,  loginFlow: createStackNavigator({    Signup: SignupScreen,    Signin: SigninScreen,  }),  mainFlow: createBottomTabNavigator({    trackListFlow: createStackNavigator({      Main: MainScreen, //  TrackList: TrackListScreen      ResultsShow: ResultShowScreen, // TrackDetail: TrackDetailScreen    }),    TrackCreate: TrackCreateScreen, // we dont need this one    Account: AccountScreen,  }),});const App = createAppContainer(switchNavigator);export default () => {  return (<AuthProvider><App        ref={(navigator) => {          setNavigator(navigator);        }}      /></AuthProvider>  );};

here is an expo link to the full app : https://expo.io/@souhaildq/enews_app