Upgrade react-native to v0.64.0-rc.0

https://github.com/brunolemos/react-native-web-monorepo/issues/57\#issuecomment-716739981 react-native-community/releases#214
brunolemos · Nov 23, 2020 · ea184d7 · ea184d7
1 parent df95e38
commit ea184d7
Show file tree

Hide file tree

Showing 29 changed files with 825 additions and 1,280 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 This is the source code from [this tutorial](https://dev.to/brunolemos/tutorial-100-code-sharing-between-ios-android--web-using-react-native-web-andmonorepo-4pej).
 
-Tech Stack: TypeScript v4, React Native v0.63, Next.js v10 & Create React App v4.
+Tech Stack: TypeScript v4, React Native v0.64, Next.js v10 & Create React App v4.
 Prettier and ESLint are also configured as pre-commit hooks.
 
 ![article-cover](https://user-images.githubusercontent.com/619186/64933790-1fc27680-d81d-11e9-8077-64a1066b7c17.png)

diff --git a/packages/components/src/App.tsx b/packages/components/src/App.tsx
@@ -5,75 +5,110 @@ import {
   StatusBar,
   StyleSheet,
   Text,
+  useColorScheme,
   View,
 } from 'react-native'
 
 import { AppHeader } from './AppHeader'
+import { Colors } from './colors'
 
 export function App() {
+  const isDarkMode = useColorScheme() === 'dark'
+
   return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}
+    <SafeAreaView
+      style={[
+        styles.safeareaContainer,
+        {
+          backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+        },
+      ]}
+    >
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={[
+          styles.scrollview,
+          {
+            backgroundColor: isDarkMode ? Colors.black : Colors.white,
+          },
+        ]}
+      >
+        <AppHeader />
+
+        <View
+          style={{
+            backgroundColor: isDarkMode ? Colors.black : Colors.white,
+          }}
         >
-          <AppHeader />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>
-                Code sharing using Monorepo
-              </Text>
-              <Text style={styles.sectionDescription}>
-                Edit{' '}
-                <Text style={styles.highlight}>
-                  packages/components/App.tsx
-                </Text>{' '}
-                to change this screen and then come back to see your edits (in
-                the phone or the browser).
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>
-                Web support via react-native-web
-              </Text>
-              <Text style={styles.sectionDescription}>
-                Run{' '}
-                <Text style={styles.highlight}>yarn workspace web start</Text>{' '}
-                to open this app in the browser.
-              </Text>
-              <Text style={styles.sectionDescription}>
-                It will share the same code from mobile, unless you create
-                platform-specific files using the{' '}
-                <Text style={styles.highlight}>.web.tsx</Text> extension (also
-                supports <Text style={styles.highlight}>.android</Text>,{' '}
-                <Text style={styles.highlight}>.ios</Text>,{' '}
-                <Text style={styles.highlight}>.native</Text>, etc).
-              </Text>
-            </View>
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
+          <Section title="Code sharing using Monorepo">
+            Edit{' '}
+            <Text style={styles.highlight}>packages/components/App.tsx</Text> to
+            change this screen and then come back to see your edits (in the
+            phone or the browser).
+          </Section>
+
+          <Section title="Web support via react-native-web">
+            Run{' '}
+            <Text style={styles.highlight}>yarn workspace web-cra start</Text>{' '}
+            or{' '}
+            <Text style={styles.highlight}>yarn workspace web-nextjs dev</Text>{' '}
+            to open this app in the browser.
+            {'\n\n'}
+            It shares the same code from mobile. You can also create
+            platform-specific files using one of these extensions:{' '}
+            <Text style={styles.highlight}>.ios.tsx</Text>,{' '}
+            <Text style={styles.highlight}>.android.tsx</Text>,{' '}
+            <Text style={styles.highlight}>.web.tsx</Text>, or{' '}
+            <Text style={styles.highlight}>.native.tsx</Text>.
+          </Section>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+function Section({
+  children,
+  title,
+}: {
+  children: React.ReactNodeArray
+  title: string
+}) {
+  const isDarkMode = useColorScheme() === 'dark'
+
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}
+      >
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}
+      >
+        {children}
+      </Text>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: 'white',
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
+  safeareaContainer: {
+    flex: 1,
   },
-  body: {
-    backgroundColor: 'white',
+  scrollview: {
+    height: '100%',
   },
   sectionContainer: {
     marginTop: 32,
@@ -82,27 +117,13 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 24,
     fontWeight: '600',
-    color: 'black',
   },
   sectionDescription: {
     marginTop: 8,
     fontSize: 18,
     fontWeight: '400',
-    color: 'gray',
   },
   highlight: {
     fontWeight: '700',
   },
-  footer: {
-    color: 'gray',
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
 })
-
-declare let global: {
-  HermesInternal?: boolean
-}
diff --git a/packages/components/src/AppHeader.web.tsx b/packages/components/src/AppHeader.web.tsx
@@ -1,10 +1,30 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, useColorScheme, View } from 'react-native'
+
+import { Colors } from './colors'
 
 export function AppHeader() {
+  const isDarkMode = useColorScheme() === 'dark'
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Welcome to React Native Web + Monorepo</Text>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: isDarkMode ? Colors.darker : Colors.white,
+        },
+      ]}
+    >
+      <Text
+        style={[
+          styles.text,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}
+      >
+        Welcome to React Native Web + Monorepo
+      </Text>
     </View>
   )
 }
@@ -15,7 +35,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: '100%',
     height: 200,
-    backgroundColor: '#f3f3f3',
   },
   text: {
     fontSize: 36,

diff --git a/packages/components/src/colors.ts b/packages/components/src/colors.ts
@@ -0,0 +1,9 @@
+export const Colors = {
+  primary: '#1292B4',
+  white: '#FFF',
+  lighter: '#F3F3F3',
+  light: '#DAE1E7',
+  dark: '#444',
+  darker: '#222',
+  black: '#000',
+}
diff --git a/packages/mobile/.flowconfig b/packages/mobile/.flowconfig
@@ -8,10 +8,6 @@
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
 
-; These should not be required directly
-; require from fbjs/lib instead: require('fbjs/lib/warning')
-node_modules/warning/.*
-
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
@@ -30,6 +26,8 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+exact_by_default=true
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -44,10 +42,6 @@ suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
@@ -58,7 +52,6 @@ deprecated-type=warn
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
 
 [strict]
 deprecated-type
@@ -70,4 +63,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.122.0
+^0.137.0
diff --git a/packages/mobile/android/app/build.gradle b/packages/mobile/android/app/build.gradle
@@ -121,6 +121,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get("enableHermes", false);
 
 android {
+    ndkVersion rootProject.ext.ndkVersion
+
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     compileOptions {
@@ -169,11 +171,12 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
 
         }

diff --git a/packages/mobile/android/app/src/debug/AndroidManifest.xml b/packages/mobile/android/app/src/debug/AndroidManifest.xml
@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>
diff --git a/packages/mobile/android/app/src/main/AndroidManifest.xml b/packages/mobile/android/app/src/main/AndroidManifest.xml
@@ -21,7 +21,5 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-
 </manifest>
diff --git a/packages/mobile/android/app/src/main/res/values/styles.xml b/packages/mobile/android/app/src/main/res/values/styles.xml
@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
     </style>

diff --git a/packages/mobile/android/build.gradle b/packages/mobile/android/build.gradle
@@ -2,10 +2,11 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.2"
-        minSdkVersion = 16
+        buildToolsVersion = "29.0.3"
+        minSdkVersion = 21
         compileSdkVersion = 29
         targetSdkVersion = 29
+        ndkVersion = "20.1.5948944"
     }
     repositories {
         google()

diff --git a/packages/mobile/android/gradle.properties b/packages/mobile/android/gradle.properties
@@ -25,4 +25,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.54.0
+FLIPPER_VERSION=0.66.0
diff --git a/packages/mobile/android/gradle/wrapper/gradle-wrapper.jar b/packages/mobile/android/gradle/wrapper/gradle-wrapper.jar
diff --git a/packages/mobile/android/gradle/wrapper/gradle-wrapper.properties b/packages/mobile/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,5 @@
-#Sun Nov 22 00:28:00 BRT 2020
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip
diff --git a/packages/mobile/android/gradlew b/packages/mobile/android/gradlew
@@ -82,6 +82,7 @@ esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -129,6 +130,7 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
     JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath