- Adding RNImageHelper

- Migrating to RN64
prscX · Jul 2, 2021 · ca3b1c8 · ca3b1c8
1 parent d408485
commit ca3b1c8
Show file tree

Hide file tree

Showing 41 changed files with 548 additions and 1,485 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.eslintIntegration": true,
+  "prettier.singleQuote": true,
+  "prettier.semi": false,
+  "prettier.bracketSpacing": true
+}
diff --git a/Example/.editorconfig b/Example/.editorconfig
@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf
diff --git a/Example/.flowconfig b/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
diff --git a/Example/.gitattributes b/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
diff --git a/Example/.prettierrc.js b/Example/.prettierrc.js
@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  arrowParens: 'avoid',
 };
diff --git a/Example/App.js b/Example/App.js
@@ -4,55 +4,67 @@
  * @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 { RNToasty } from 'react-native-toasty'
-import Icon from "react-native-vector-icons/FontAwesome";
+import {RNToasty} from 'react-native-toasty';
+import Icon from 'react-native-vector-icons/FontAwesome';
 
 type Props = {};
 export default class App extends Component<Props> {
   render() {
-    let copy = <Icon name="copy" size={24} color="#FFFFFF" family={"FontAwesome"} />;
+    let copy = (
+      <Icon name="copy" size={24} color="#FFFFFF" family={'FontAwesome'} />
+    );
 
-    return <View style={styles.container}>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Normal({ title: "Message" });
-      }}>
-        <Text>{"Normal"}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Info({ title: "Message" });
-      }}>
-        <Text>{"Info"}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Success({ title: 'Message' })
-      }}>
-        <Text>{'Success'}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Warn({ title: 'Message' })
-      }}>
-        <Text>{'Warning'}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Error({ title: 'Message' })
-      }}>
-        <Text>{'Error'}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => {
-        RNToasty.Show({ title: "Message", titleSize: 50, titleColor: '#555555', withIcon: true, duration: 1, tintColor: '#000000', icon: copy });
-      }}>
-        <Text>{'Custom'}</Text>
-      </TouchableOpacity>
-    </View>;
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Normal({title: 'Message'});
+          }}>
+          <Text>{'Normal'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Info({title: 'Message'});
+          }}>
+          <Text>{'Info'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Success({title: 'Message'});
+          }}>
+          <Text>{'Success'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Warn({title: 'Message'});
+          }}>
+          <Text>{'Warning'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Error({title: 'Message'});
+          }}>
+          <Text>{'Error'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            RNToasty.Show({
+              title: 'Message',
+              titleSize: 50,
+              titleColor: '#555555',
+              withIcon: true,
+              duration: 1,
+              tintColor: '#000000',
+              icon: copy,
+            });
+          }}>
+          <Text>{'Custom'}</Text>
+        </TouchableOpacity>
+      </View>
+    );
   }
 }
 
@@ -62,5 +74,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
-  }
-});
+  },
+});
diff --git a/Example/android/app/build.gradle b/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
 ]
 
@@ -121,6 +122,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,22 +160,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)
             }
 
         }
@@ -181,8 +186,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")

diff --git a/Example/android/app/src/debug/AndroidManifest.xml b/Example/android/app/src/debug/AndroidManifest.xml
diff --git a/Example/android/app/src/main/AndroidManifest.xml b/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>
diff --git a/Example/android/app/src/main/java/com/example/MainApplication.java b/Example/android/app/src/main/java/com/example/MainApplication.java
@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
@@ -43,23 +44,28 @@ public ReactNativeHost getReactNativeHost() {
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
-    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
+    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }
 
   /**
-   * Loads Flipper in React Native templates.
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    *
    * @param context
+   * @param reactInstanceManager
    */
-  private static void initializeFlipper(Context context) {
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
     if (BuildConfig.DEBUG) {
       try {
         /*
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
-        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
+        Class<?> aClass = Class.forName("com.example.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
       } catch (ClassNotFoundException e) {
         e.printStackTrace();
       } catch (NoSuchMethodException e) {

diff --git a/Example/android/app/src/main/res/values/styles.xml b/Example/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>