- Migrating to RN64

Author: prscms

Example/.editorconfig

@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf

Example/.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
@@ -56,10 +50,8 @@ untyped-type-import=warn
 nonstrict-import=warn
 deprecated-type=warn
 unsafe-getters-setters=warn
-inexact-spread=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
 
 [strict]
 deprecated-type
@@ -71,4 +63,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.113.0
+^0.137.0

Example/.gitattributes

@@ -1 +1,3 @@
-*.pbxproj -text
+# Windows files should use crlf line endings
+# https://help.github.com/articles/dealing-with-line-endings/
+*.bat text eol=crlf

Example/.prettierrc.js

@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  arrowParens: 'avoid',
 };

Example/App.js

@@ -4,107 +4,94 @@
  * @flow
  */
 
-import React, { Component } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity
-} from 'react-native';
+import React, {Component} from 'react';
+import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
 
-import RNFileSelector from 'react-native-file-selector'
+import RNFileSelector from 'react-native-file-selector';
 
-import RNFS from 'react-native-fs'
+import RNFS from 'react-native-fs';
 
-import animatedPhoto from './assets/animated_photo.gif'
-import photo from './assets/photo.jpg'
+import animatedPhoto from './assets/animated_photo.gif';
+import photo from './assets/photo.jpg';
 // import info from './assets/nfo.plist'
 
 export default class App extends Component<Props> {
-  constructor (props) {
-    super(props)
+  constructor(props) {
+    super(props);
 
     this.state = {
-      visible: false
-    }
+      visible: false,
+    };
   }
 
-  _onPress () {
+  _onPress() {
     let filter;
     if (Platform.OS === 'ios') {
       filter = [];
     } else if (Platform.OS === 'android') {
-      filter = ".*\\.*";
+      filter = '.*\\.*';
     }
 
-
-    RNFileSelector.Show(
-      {
-        path: RNFS.DocumentDirectoryPath,
-        filter: filter,
-        title: 'Select File',
-        closeMenu: true,
-        editable: true,
-        onDone: (path) => {
-          console.log('file selected: ' + path)
-        },
-        onCancel: () => {
-          console.log('cancelled')
-        }
-      }
-    )
+    RNFileSelector.Show({
+      path: RNFS.DocumentDirectoryPath,
+      filter: filter,
+      title: 'Select File',
+      closeMenu: true,
+      editable: true,
+      onDone: path => {
+        console.log('file selected: ' + path);
+      },
+      onCancel: () => {
+        console.log('cancelled');
+      },
+    });
   }
 
-  componentDidMount () {
-
+  componentDidMount() {
     // create a path you want to write to
-    let animatedPhotoPath = RNFS.DocumentDirectoryPath + "/animated_photo.gif";
-    let photoPath = RNFS.DocumentDirectoryPath + "/photo.jpg";
+    let animatedPhotoPath = RNFS.DocumentDirectoryPath + '/animated_photo.gif';
+    let photoPath = RNFS.DocumentDirectoryPath + '/photo.jpg';
     // let infoPath = RNFS.DocumentDirectoryPath + "/info.plist";
-    let assetsPath = RNFS.DocumentDirectoryPath + '/assets'
+    let assetsPath = RNFS.DocumentDirectoryPath + '/assets';
 
     // write the file
-    RNFS.writeFile(animatedPhotoPath, animatedPhoto, "utf8")
+    RNFS.writeFile(animatedPhotoPath, animatedPhoto, 'utf8')
       .then(success => {
-        console.log("FILE WRITTEN!");
+        console.log('FILE WRITTEN!');
       })
       .catch(err => {
         console.log(err.message);
       });
 
-    RNFS.writeFile(photoPath, photo, "utf8")
+    RNFS.writeFile(photoPath, photo, 'utf8')
       .then(success => {
-        console.log("FILE WRITTEN!");
+        console.log('FILE WRITTEN!');
       })
       .catch(err => {
         console.log(err.message);
       });
 
-
-    RNFS.mkdir(assetsPath)
-      .then(success => {
-        console.log('DIRECTORY CREATED')
-
-        RNFS.writeFile(assetsPath + "/animated_photo.gif", animatedPhoto, "utf8")
-          .then(success => {
-            console.log("DIRECTORY WRITTEN!");
-          })
-          .catch(err => {
-            console.log(err.message);
-          });
-
-        RNFS.writeFile(assetsPath + "/photo.jpg", photo, "utf8")
-          .then(success => {
-            console.log("DIRECTORY WRITTEN!");
-          })
-          .catch(err => {
-            console.log(err.message);
-          });
-      })
-
-     
-      // RNFS.writeFile(infoPath, info, "utf8")
+    RNFS.mkdir(assetsPath).then(success => {
+      console.log('DIRECTORY CREATED');
+
+      RNFS.writeFile(assetsPath + '/animated_photo.gif', animatedPhoto, 'utf8')
+        .then(success => {
+          console.log('DIRECTORY WRITTEN!');
+        })
+        .catch(err => {
+          console.log(err.message);
+        });
+
+      RNFS.writeFile(assetsPath + '/photo.jpg', photo, 'utf8')
+        .then(success => {
+          console.log('DIRECTORY WRITTEN!');
+        })
+        .catch(err => {
+          console.log(err.message);
+        });
+    });
+
+    // RNFS.writeFile(infoPath, info, "utf8")
     //   .then(success => {
     //     console.log("FILE WRITTEN!");
     //   })
@@ -114,20 +101,28 @@ export default class App extends Component<Props> {
   }
 
   render() {
-    return <View style={styles.container}>
-        <TouchableOpacity onPress={() => {
-            this._onPress()
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            this._onPress();
 
             // this.setState({ visible: true });
           }}>
           <Text>Click</Text>
-          <RNFileSelector title={"Select File"} visible={this.state.visible} onDone={(path) => {
-              console.log("file selected: " + path);
-            }} onCancel={() => {
-              console.log("cancelled");
-            }}/>
+          <RNFileSelector
+            title={'Select File'}
+            visible={this.state.visible}
+            onDone={path => {
+              console.log('file selected: ' + path);
+            }}
+            onCancel={() => {
+              console.log('cancelled');
+            }}
+          />
         </TouchableOpacity>
-      </View>;
+      </View>
+    );
   }
 }
 
@@ -137,5 +132,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
-  }
+  },
 });

Example/android/app/build.gradle

@@ -20,7 +20,7 @@ import com.android.build.OutputFile
  *   // default. Can be overridden with ENTRY_FILE environment variable.
  *   entryFile: "index.android.js",
  *
- *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
  *   bundleCommand: "ram-bundle",
  *
  *   // whether to bundle JS and assets in debug mode
@@ -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 {
@@ -157,30 +159,24 @@ android {
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
-            // see https://facebook.github.io/react-native/docs/signed-apk-android.
+            // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
 
-    packagingOptions {
-        pickFirst "lib/armeabi-v7a/libc++_shared.so"
-        pickFirst "lib/arm64-v8a/libc++_shared.so"
-        pickFirst "lib/x86/libc++_shared.so"
-        pickFirst "lib/x86_64/libc++_shared.so"
-    }
-
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         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)
             }
 
         }
@@ -200,6 +196,7 @@ dependencies {
 
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
     }
 
     debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {