- added support for react native 64

- migrating example project to react native 64

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "window.zoomLevel": 0,
+  "workbench.colorTheme": "Default Dark+",
+  "workbench.iconTheme": "vscode-icons",
+  "workbench.editor.enablePreview": false,
+  "javascript.validate.enable": false,
+  "vsicons.projectDetection.autoReload": true,
+  "editor.renderWhitespace": "boundary",
+  "editor.rulers": [100],
+  "editor.cursorBlinking": "solid",
+  "editor.fontLigatures": true,
+  "local-history.daysLimit": 5,
+  "local-history.maxDisplay": 20,
+  "local-history.exclude": ["{.history,.vscode,**/node_modules,typings,out}"],
+  "local-history.enabled": 1,
+  "editor.formatOnSave": true,
+  "vscode-open-project.projects": {
+    "Modules": "/Modules"
+  }
+}

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
 
@@ -21,7 +17,7 @@ node_modules/warning/.*
 [include]
 
 [libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/interface.js
 node_modules/react-native/flow/
 
 [options]
@@ -30,25 +26,22 @@ 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
 
 munge_underscores=true
 
-module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
 
 suppress_type=$FlowIssue
 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
@@ -57,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
@@ -72,4 +63,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.105.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/.gitignore

@@ -20,7 +20,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 
 # Android/IntelliJ
 #

Example/.prettierrc.js

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

Example/App.js

@@ -4,115 +4,115 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import React, {Component} from 'react';
 import {
   Platform,
   StyleSheet,
   Text,
   View,
   Button,
-  DeviceEventEmitter
-} from 'react-native'
+  DeviceEventEmitter,
+} from 'react-native';
 
-import { AppTour, AppTourSequence, AppTourView } from 'react-native-app-tour'
+import {AppTour, AppTourSequence, AppTourView} from 'react-native-app-tour';
 
-import Top from './components/Top'
-import Center from './components/Center'
-import Bottom from './components/Bottom'
+import Top from './components/Top';
+import Center from './components/Center';
+import Bottom from './components/Bottom';
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
   android:
     'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu'
-})
+    'Shake or press menu button for dev menu',
+});
 
 export default class App extends Component<{}> {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.appTourTargets = []
+    this.appTourTargets = [];
   }
 
   componentWillMount() {
-    this.registerSequenceStepEvent()
-    this.registerFinishSequenceEvent()
+    this.registerSequenceStepEvent();
+    this.registerFinishSequenceEvent();
   }
 
   componentDidMount() {
     setTimeout(() => {
-      let appTourSequence = new AppTourSequence()
+      let appTourSequence = new AppTourSequence();
       this.appTourTargets.forEach(appTourTarget => {
-        appTourSequence.add(appTourTarget)
-      })
+        appTourSequence.add(appTourTarget);
+      });
 
-      AppTour.ShowSequence(appTourSequence)
-    }, 1000)
+      AppTour.ShowSequence(appTourSequence);
+    }, 1000);
   }
 
   registerSequenceStepEvent = () => {
     if (this.sequenceStepListener) {
-      this.sequenceStepListener.remove()
+      this.sequenceStepListener.remove();
     }
     this.sequenceStepListener = DeviceEventEmitter.addListener(
       'onShowSequenceStepEvent',
       (e: Event) => {
-        console.log(e)
-      }
-    )
-  }
+        console.log(e);
+      },
+    );
+  };
 
   registerFinishSequenceEvent = () => {
     if (this.finishSequenceListener) {
-      this.finishSequenceListener.remove()
+      this.finishSequenceListener.remove();
     }
     this.finishSequenceListener = DeviceEventEmitter.addListener(
       'onFinishSequenceEvent',
       (e: Event) => {
-        console.log(e)
-      }
-    )
-  }
+        console.log(e);
+      },
+    );
+  };
 
   render() {
     return (
       <View style={styles.container}>
         <Top
           style={styles.top}
           addAppTourTarget={appTourTarget => {
-            this.appTourTargets.push(appTourTarget)
+            this.appTourTargets.push(appTourTarget);
           }}
         />
         <Center
           style={styles.center}
           addAppTourTarget={appTourTarget => {
-            this.appTourTargets.push(appTourTarget)
+            this.appTourTargets.push(appTourTarget);
           }}
         />
         <Bottom
           style={styles.bottom}
           addAppTourTarget={appTourTarget => {
-            this.appTourTargets.push(appTourTarget)
+            this.appTourTargets.push(appTourTarget);
           }}
         />
       </View>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   top: {
-    flex: 1
+    flex: 1,
   },
   center: {
-    flex: 1
+    flex: 1,
   },
   bottom: {
-    flex: 1
-  }
-})
+    flex: 1,
+  },
+});

Example/android/app/build.gradle

@@ -15,10 +15,12 @@ import com.android.build.OutputFile
  *   // the name of the generated asset file containing your JS bundle
  *   bundleAssetName: "index.android.bundle",
  *
- *   // the entry file for bundle generation
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // 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
@@ -76,7 +78,6 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js",
     enableHermes: false,  // clean and rebuild if changing
 ]
 
@@ -120,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 {
@@ -156,22 +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"
         }
     }
+
     // 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)
             }
 
         }
@@ -180,8 +185,24 @@ android {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
+    //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+      exclude group:'com.facebook.fbjni'
+    }
+
+    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}") {
+        exclude group:'com.facebook.flipper'
+    }
+
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")

Example/android/app/src/main/AndroidManifest.xml

@@ -1,26 +1,13 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.example">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">
 
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
-        android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
+  <uses-permission android:name="android.permission.INTERNET" />
 
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
+    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+  </application>
 </manifest>