Migrated to React Native v0.63

package.json

@@ -8,32 +8,43 @@
     ]
   },
   "scripts": {
-    "postinstall": "patch-package",
     "android": "yarn workspace mobile android",
-    "compile": "tsc -b --incremental",
-    "ios": "yarn workspace mobile  ios",
+    "format": "prettier --write .",
+    "ios": "yarn workspace mobile ios",
+    "lint": "eslint .",
     "studio": "yarn workspace mobile studio",
+    "test": "yarn workspaces run test",
     "xcode": "yarn workspace mobile xcode"
   },
-  "dependencies": {
-    "@react-native-community/masked-view": "^0.1.5",
-    "@react-navigation/bottom-tabs": "^5.0.0-alpha.22",
-    "@react-navigation/core": "^5.0.0-alpha.25",
-    "@react-navigation/native": "^5.0.0-alpha.14",
-    "@react-navigation/stack": "^5.0.0-alpha.37",
-    "react-native": "0.61.3",
-    "react-native-gesture-handler": "^1.5.2",
-    "react-native-reanimated": "^1.4.0",
-    "react-native-safe-area-context": "^0.6.1",
-    "react-native-screens": "^2.0.0-alpha.22",
-    "react-router-dom": "^5.1.2"
-  },
   "devDependencies": {
-    "@types/react": "16.9.11",
-    "@types/react-native": "0.60.22",
-    "@types/react-router-dom": "^5.1.3",
-    "concurrently": "5.0.0",
-    "patch-package": "^6.2.0",
-    "typescript": "3.6.4"
+    "@react-native-community/eslint-config": "2.0.0",
+    "@typescript-eslint/eslint-plugin": "4.8.1",
+    "@typescript-eslint/parser": "4.8.1",
+    "eslint": "7.14.0",
+    "eslint-config-airbnb-typescript": "12.0.0",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "husky": "4.3.0",
+    "lint-staged": "10.5.1",
+    "patch-package": "^6.2.2",
+    "prettier": "2.2.0",
+    "typescript": "4.1.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "*.{js,jsx,ts,tsx,json,html,md,css}": [
+      "prettier --write"
+    ]
   }
 }

packages/components/package.json

@@ -2,7 +2,29 @@
   "name": "components",
   "version": "0.0.1",
   "private": true,
+  "scripts": {
+    "test": "jest --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "react": "*",
+    "react-native": "*"
+  },
   "dependencies": {
-    "query-string": "^6.9.0"
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.2",
+    "@react-navigation/drawer": "^5.11.4",
+    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
+    "query-string": "^6.13.8",
+    "react-native-gesture-handler": "^1.9.0",
+    "react-native-reanimated": "^1.13.2",
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-screens": "^2.16.1",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7"
   }
 }

packages/components/src/App.tsx

@@ -1,16 +1,23 @@
 import React from 'react'
 
-import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
 
 import { AppHeader } from './AppHeader'
 import { Router } from './Router'
 
 export function App() {
-  return <Router />;
+  return <Router />
 }
 
 const styles = StyleSheet.create({
   scrollView: {
-    backgroundColor: "white"
-  }
-});
+    backgroundColor: 'white',
+  },
+})

packages/components/src/AppHeader/index.d.ts

@@ -1,3 +1,3 @@
 import { FunctionComponent } from 'react'
 
-export const AppHeader: FunctionComponent;
+export const AppHeader: FunctionComponent

packages/components/src/AppHeader/index.native.tsx

@@ -1,3 +1,3 @@
 import { Header as AppHeader } from 'react-native/Libraries/NewAppScreen'
 
-export { AppHeader };
+export { AppHeader }

packages/components/src/AppHeader/index.web.tsx

@@ -7,18 +7,18 @@ export function AppHeader() {
     <View style={styles.container}>
       <Text style={styles.text}>Welcome to React Native Web + Monorepo</Text>
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: 200
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: 200,
   },
   text: {
     fontSize: 36,
-    fontWeight: "600"
-  }
-});
+    fontWeight: '600',
+  },
+})

packages/components/src/Link/Link.models.ts

@@ -3,7 +3,7 @@ import { ReactChild } from 'react'
 import { Route } from '../models/router'
 
 export interface LinkProps {
-  children?: ReactChild;
-  path: Route["path"];
-  params?: Route["params"];
+  children?: ReactChild
+  path: Route['path']
+  params?: Route['params']
 }

packages/components/src/Link/index.native.tsx

@@ -1,23 +1,23 @@
 import React, { ReactChild, useCallback } from 'react'
 
-import { useNavigation } from '@react-navigation/core'
+import { useNavigation } from '@react-navigation/native'
 import { TouchableOpacity } from 'react-native'
 
 import { LinkProps } from './Link.models'
 
 const Link = (props: LinkProps) => {
-  const { path, params } = props;
-  const navigation = useNavigation();
+  const { path, params } = props
+  const navigation = useNavigation()
 
   const navigate = useCallback(() => {
-    navigation.navigate(path, params);
-  }, [path, params]);
+    navigation.navigate(path, params)
+  }, [navigation, path, params])
 
   return (
     <TouchableOpacity accessibilityRole="button" onPress={navigate}>
       {props.children}
     </TouchableOpacity>
-  );
-};
+  )
+}
 
-export { Link };
+export { Link }

packages/components/src/Link/index.web.tsx

@@ -6,13 +6,13 @@ import { Link as DOMLink } from 'react-router-dom'
 import { LinkProps } from './Link.models'
 
 const Link = (props: LinkProps) => {
-  const { path, params: qsParams = {} } = props;
+  const { path, params: qsParams = {} } = props
 
-  const params = `?${stringify(qsParams)}`;
+  const params = `?${stringify(qsParams)}`
 
   return (
     <DOMLink to={{ pathname: path, search: params }}>{props.children}</DOMLink>
-  );
-};
+  )
+}
 
-export { Link };
+export { Link }

packages/components/src/Router/index.native.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useState } from 'react'
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { NavigationNativeContainer } from '@react-navigation/native'
+import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 
 import { About as AboutScreen } from '../screens/About'
@@ -11,9 +11,9 @@ import { WebSupport as WebSupportScreen } from '../screens/WebSupport'
 import { routes } from '../utils/router'
 
 // Screens
-const About = createStackNavigator();
-const Features = createStackNavigator();
-const Main = createBottomTabNavigator();
+const About = createStackNavigator()
+const Features = createStackNavigator()
+const Main = createBottomTabNavigator()
 
 const AboutNavigator = () => {
   return (
@@ -24,8 +24,8 @@ const AboutNavigator = () => {
         options={{ title: routes.about._root.name }}
       />
     </About.Navigator>
-  );
-};
+  )
+}
 
 const FeaturesNavigator = () => {
   return (
@@ -41,12 +41,12 @@ const FeaturesNavigator = () => {
         options={{ title: routes.features.webSupport.name }}
       />
     </Features.Navigator>
-  );
-};
+  )
+}
 
 const MainNavigator = () => {
   return (
-    <NavigationNativeContainer>
+    <NavigationContainer>
       <Main.Navigator>
         <Main.Screen
           name={routes.about._navigator.path}
@@ -59,10 +59,10 @@ const MainNavigator = () => {
           options={{ title: routes.features._navigator.name }}
         />
       </Main.Navigator>
-    </NavigationNativeContainer>
-  );
-};
+    </NavigationContainer>
+  )
+}
 
-const Router = MainNavigator;
+const Router = MainNavigator
 
-export { Router };
+export { Router }

packages/components/src/Router/index.web.tsx

@@ -29,7 +29,7 @@ const Router = () => {
         </Route>
       </Switch>
     </BrowserRouter>
-  );
-};
+  )
+}
 
-export { Router };
+export { Router }

packages/components/src/models/router.ts

@@ -1,14 +1,14 @@
 export interface NavigationParams<T> {
-  [id: string]: T;
+  [id: string]: T
 }
 
-export type Navigate = <T>(key: string, params?: NavigationParams<T>) => {};
+export type Navigate = <T>(key: string, params?: NavigationParams<T>) => {}
 
 export interface Route {
-  path: string;
-  params?: NavigationParams<any>;
+  path: string
+  params?: NavigationParams<any>
 }
 
-export interface RouteConfig extends Pick<Route, "path"> {
-  name: string;
+export interface RouteConfig extends Pick<Route, 'path'> {
+  name: string
 }

packages/components/src/screens/About.tsx

@@ -27,5 +27,5 @@ export function About() {
         </ScrollView>
       </SafeAreaView>
     </>
-  );
+  )
 }