Upgraded to Expo v40.0.0 and react-navigation v5 with linking for web.

App.tsx

@@ -1,12 +1,26 @@
 import React from 'react';
-import { Provider } from 'react-native-paper';
-import App from './src';
+import { Provider as PaperProvider } from 'react-native-paper';
+import { NavigationContainer } from '@react-navigation/native';
 import { theme } from './src/core/theme';
+import Main from './src';
 
-const Main = () => (
-  <Provider theme={theme}>
-    <App />
-  </Provider>
-);
+const linking = {
+  prefixes: [],
+  config: {
+    screens: {
+      "Home": "home",
+      "Login": "login",
+      "Register": "register",
+      "Forgot Password": "forgot-password",
+      "Dashboard": "dashboard"
+    }
+  }
+}
 
-export default Main;
+export default () => (
+  <PaperProvider theme={theme}>
+    <NavigationContainer linking={linking}>
+      <Main />
+    </NavigationContainer>
+  </PaperProvider>
+);

README.md

@@ -23,12 +23,12 @@ npm install
 yarn install
 ```
 
-3. Run project on iOS / Android.
+3. Run project on iOS / Android / Web.
 
 ```js
- npm run ios // npm run android
+ npm run ios // npm run android // npm run web
  // or
- yarn ios // yarn android
+ yarn ios // yarn android // yarn web
 ```
 
 Project was created using [Expo](https://expo.io/). If you want standard native project please run following command:

app.json

@@ -3,8 +3,11 @@
     "name": "React Native Paper Login Template",
     "slug": "react-native-paper-login-template",
     "privacy": "public",
-    "sdkVersion": "35.0.0",
-    "platforms": ["ios", "android", "web"],
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -16,7 +19,9 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     }

package.json

@@ -8,24 +8,24 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^35.0.0",
-    "react": "16.8.3",
-    "react-dom": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
-    "react-native-gesture-handler": "1.3.0",
-    "react-native-paper": "^3.0.0",
+    "expo": "^40.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.8.0",
+    "react-native-paper": "^4.7.2",
+    "react-native-screens": "~2.15.2",
     "react-native-status-bar-height": "^2.4.0",
-    "react-native-screens": "^2.2.0",
-    "react-native-web": "^0.11.7",
-    "react-navigation": "^4.0.10",
-    "react-navigation-stack": "^1.10.2"
+    "react-native-web": "~0.14.13",
+    "@react-navigation/native": "^5.9.3",
+    "@react-navigation/stack": "^5.14.3"
   },
   "devDependencies": {
-    "@types/react": "^16.8.23",
-    "@types/react-native": "^0.57.65",
-    "babel-preset-expo": "^7.1.0",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
+    "babel-preset-expo": "8.3.0",
     "prettier": "^1.18.2",
-    "typescript": "^3.6.3"
+    "typescript": "~4.0.0"
   },
   "private": true
 }

src/components/Background.tsx

@@ -25,6 +25,7 @@ const styles = StyleSheet.create({
   background: {
     flex: 1,
     width: '100%',
+    backgroundColor: '#ffffff'
   },
   container: {
     flex: 1,

src/core/theme.tsx

@@ -1,11 +1,14 @@
-import { DefaultTheme } from 'react-native-paper';
+import { DefaultTheme as PaperDefaultTheme } from 'react-native-paper';
+import { DefaultTheme as NavigationDefaultTheme } from '@react-navigation/native';
 
 export const theme = {
-  ...DefaultTheme,
+  ...PaperDefaultTheme,
+  ...NavigationDefaultTheme,
   colors: {
-    ...DefaultTheme.colors,
+    ...PaperDefaultTheme.colors,
+    ...NavigationDefaultTheme.colors,
     primary: '#600EE6',
     secondary: '#414757',
-    error: '#f13a59',
+    error: '#f13a59'
   },
 };

src/index.tsx

@@ -1,6 +1,5 @@
-import { createAppContainer } from 'react-navigation';
-import { createStackNavigator } from 'react-navigation-stack';
-
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
 import {
   HomeScreen,
   LoginScreen,
@@ -9,18 +8,17 @@ import {
   Dashboard,
 } from './screens';
 
-const Router = createStackNavigator(
-  {
-    HomeScreen,
-    LoginScreen,
-    RegisterScreen,
-    ForgotPasswordScreen,
-    Dashboard,
-  },
-  {
-    initialRouteName: 'HomeScreen',
-    headerMode: 'none',
-  }
-);
+const Stack = createStackNavigator();
 
-export default createAppContainer(Router);
+export default () => (
+  <Stack.Navigator
+    initialRouteName="Home"
+    screenOptions={{ headerShown: false }}
+  >
+    <Stack.Screen name="Home" component={HomeScreen} />
+    <Stack.Screen name="Login" component={LoginScreen} />
+    <Stack.Screen name="Register" component={RegisterScreen} />
+    <Stack.Screen name="Forgot Password" component={ForgotPasswordScreen} />
+    <Stack.Screen name="Dashboard" component={Dashboard} />
+  </Stack.Navigator>
+)

src/screens/Dashboard.tsx

@@ -18,7 +18,7 @@ const Dashboard = ({ navigation }: Props) => (
       Your amazing app starts here. Open you favourite code editor and start
       editing this project.
     </Paragraph>
-    <Button mode="outlined" onPress={() => navigation.navigate('HomeScreen')}>
+    <Button mode="outlined" onPress={() => navigation.navigate('Home')}>
       Logout
     </Button>
   </Background>

src/screens/ForgotPasswordScreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useState } from 'react';
-import { Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { emailValidator } from '../core/utils';
 import Background from '../components/Background';
 import BackButton from '../components/BackButton';
@@ -25,12 +25,12 @@ const ForgotPasswordScreen = ({ navigation }: Props) => {
       return;
     }
 
-    navigation.navigate('LoginScreen');
+    navigation.navigate('Login');
   };
 
   return (
     <Background>
-      <BackButton goBack={() => navigation.navigate('LoginScreen')} />
+      {Platform.OS !== "web" && <BackButton goBack={() => navigation.navigate('Login')} />}
 
       <Logo />
 
@@ -55,7 +55,7 @@ const ForgotPasswordScreen = ({ navigation }: Props) => {
 
       <TouchableOpacity
         style={styles.back}
-        onPress={() => navigation.navigate('LoginScreen')}
+        onPress={() => navigation.navigate('Login')}
       >
         <Text style={styles.label}>← Back to login</Text>
       </TouchableOpacity>

src/screens/HomeScreen.tsx

@@ -18,12 +18,12 @@ const HomeScreen = ({ navigation }: Props) => (
     <Paragraph>
       The easiest way to start with your amazing application.
     </Paragraph>
-    <Button mode="contained" onPress={() => navigation.navigate('LoginScreen')}>
+    <Button mode="contained" onPress={() => navigation.navigate('Login')}>
       Login
     </Button>
     <Button
       mode="outlined"
-      onPress={() => navigation.navigate('RegisterScreen')}
+      onPress={() => navigation.navigate('Register')}
     >
       Sign Up
     </Button>

src/screens/LoginScreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useState } from 'react';
-import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
+import { Platform, TouchableOpacity, StyleSheet, Text, View } from 'react-native';
 import Background from '../components/Background';
 import Logo from '../components/Logo';
 import Header from '../components/Header';
@@ -33,8 +33,8 @@ const LoginScreen = ({ navigation }: Props) => {
 
   return (
     <Background>
-      <BackButton goBack={() => navigation.navigate('HomeScreen')} />
-
+      {Platform.OS !== "web" && <BackButton goBack={() => navigation.navigate('Home')} />}
+      
       <Logo />
 
       <Header>Welcome back.</Header>
@@ -64,7 +64,7 @@ const LoginScreen = ({ navigation }: Props) => {
 
       <View style={styles.forgotPassword}>
         <TouchableOpacity
-          onPress={() => navigation.navigate('ForgotPasswordScreen')}
+          onPress={() => navigation.navigate('Forgot Password')}
         >
           <Text style={styles.label}>Forgot your password?</Text>
         </TouchableOpacity>
@@ -76,7 +76,7 @@ const LoginScreen = ({ navigation }: Props) => {
 
       <View style={styles.row}>
         <Text style={styles.label}>Don’t have an account? </Text>
-        <TouchableOpacity onPress={() => navigation.navigate('RegisterScreen')}>
+        <TouchableOpacity onPress={() => navigation.navigate('Register')}>
           <Text style={styles.link}>Sign up</Text>
         </TouchableOpacity>
       </View>

src/screens/RegisterScreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import Background from '../components/Background';
 import Logo from '../components/Logo';
 import Header from '../components/Header';
@@ -40,7 +40,7 @@ const RegisterScreen = ({ navigation }: Props) => {
 
   return (
     <Background>
-      <BackButton goBack={() => navigation.navigate('HomeScreen')} />
+      {Platform.OS !== "web" && <BackButton goBack={() => navigation.navigate('Home')} />}
 
       <Logo />
 
@@ -84,7 +84,7 @@ const RegisterScreen = ({ navigation }: Props) => {
 
       <View style={styles.row}>
         <Text style={styles.label}>Already have an account? </Text>
-        <TouchableOpacity onPress={() => navigation.navigate('LoginScreen')}>
+        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
           <Text style={styles.link}>Login</Text>
         </TouchableOpacity>
       </View>