Update Readme and Upgrade to Expo 40 & React Navigation 5

App.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Provider } from 'react-native-paper';
+import { NavigationContainer } from '@react-navigation/native';
 import App from './src';
 import { theme } from './src/core/theme';
 
 const Main = () => (
   <Provider theme={theme}>
-    <App />
+    <NavigationContainer>
+      <App />
+    </NavigationContainer>
   </Provider>
 );
 

README.md

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

app.json

@@ -3,7 +3,6 @@
     "name": "React Native Paper Login Template",
     "slug": "react-native-paper-login-template",
     "privacy": "public",
-    "sdkVersion": "35.0.0",
     "platforms": ["ios", "android", "web"],
     "version": "1.0.0",
     "orientation": "portrait",

package.json

@@ -8,24 +8,25 @@
     "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",
-    "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-community/masked-view": "^0.1.10",
+    "@react-navigation/native": "^5.2.4",
+    "@react-navigation/stack": "^5.2.11",
+    "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.0.tar.gz",
+    "react-native-gesture-handler": "~1.9.0",
+    "react-native-paper": "^4.7.1",
+    "react-native-screens": "~2.15.0",
+    "react-native-status-bar-height": "^2.6.0",
+    "react-native-web": "~0.14.10"
   },
   "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/index.tsx

@@ -1,5 +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,
@@ -9,18 +9,21 @@ import {
   Dashboard,
 } from './screens';
 
-const Router = createStackNavigator(
-  {
-    HomeScreen,
-    LoginScreen,
-    RegisterScreen,
-    ForgotPasswordScreen,
-    Dashboard,
-  },
-  {
-    initialRouteName: 'HomeScreen',
-    headerMode: 'none',
-  }
-);
+const RootStack = createStackNavigator();
 
-export default createAppContainer(Router);
+const RootStackScreen = () => {
+  return (
+    <RootStack.Navigator headerMode="none">
+      <RootStack.Screen name="HomeScreen" component={HomeScreen} />
+      <RootStack.Screen name="LoginScreen" component={LoginScreen} />
+      <RootStack.Screen name="RegisterScreen" component={RegisterScreen} />
+      <RootStack.Screen
+        name="ForgotPasswordScreen"
+        component={ForgotPasswordScreen}
+      />
+      <RootStack.Screen name="Dashboard" component={Dashboard} />
+    </RootStack.Navigator>
+  );
+};
+
+export default RootStackScreen;