[mm 15792] Fix massive app slowdown with many emojis (#3209)

* [MM-16593] [MM-17175] [MM-17164] [MM-17189] [MM-17181] Android - Upgrade to RN 0.60 (#3145) * Upgrade to react-native 0.60 * Use @sentry/react-native * Manually link @sentry/react-native * Address review comments * Jetify after install * Call jetify from node_modules * Run npm install react-native-fast-image --save * Link react-native-fast-image for Android * Link react-native-fast-image to iOS Pod * Replace Image with FastImage in emoji.js and remove redundant caching * Remove duplicate sentry gradle * Feedback review * Remove FastImage and Sentry from the Podfile
2019-11-18 12:34:39 +08:00 · 2019-11-18 12:34:39 +08:00 · a1c8a4691e
commit a1c8a4691e
parent c7cdce01fa
8 changed files with 778 additions and 469 deletions
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -268,6 +268,7 @@ dependencies {
    implementation project(':react-native-android-open-settings')
    implementation project(':react-native-haptic-feedback')

+    implementation project(':react-native-fast-image')
    // For animated GIF support
    implementation 'com.facebook.fresco:fresco:2.0.0'
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
--- a/android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java
+++ b/android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java
@ -31,6 +31,7 @@ import com.reactnativecommunity.asyncstorage.AsyncStorageModule;
 import com.reactnativecommunity.netinfo.NetInfoModule;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import io.sentry.RNSentryModule;
+import com.dylanvann.fastimage.FastImageViewPackage;
 import com.levelasquez.androidopensettings.AndroidOpenSettings;
 import com.mkuczera.RNReactNativeHapticFeedbackModule;

@ -192,6 +193,7 @@ public class MainApplication extends NavigationApplication implements INotificat
                };
              }
            },
+            new FastImageViewPackage(),
            new RNCWebViewPackage(),
            new SvgPackage(),
            new LinearGradientPackage(),
--- a/android/settings.gradle
+++ b/android/settings.gradle
@ -3,6 +3,8 @@ include ':@sentry_react-native'
 project(':@sentry_react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@sentry/react-native/android')
 include ':react-native-android-open-settings'
 project(':react-native-android-open-settings').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-open-settings/android')
+include ':react-native-fast-image'
+project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
 include ':react-native-haptic-feedback'
 project(':react-native-haptic-feedback').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-feedback/android')
 include ':react-native-gesture-handler'
--- a/app/components/emoji/emoji.js
+++ b/app/components/emoji/emoji.js
@ -9,6 +9,7 @@ import {
    StyleSheet,
    Text,
 } from 'react-native';
+import FastImage from 'react-native-fast-image';

 import CustomPropTypes from 'app/constants/custom_prop_types';
 import ImageCacheManager from 'app/utils/image_cache_manager';
@ -140,7 +141,7 @@ export default class Emoji extends React.PureComponent {
        }

        return (
-            <Image
+            <FastImage
                key={key}
                style={{width, height}}
                source={{uri: imageUrl}}
--- a/ios/Mattermost.xcodeproj/project.pbxproj
+++ b/ios/Mattermost.xcodeproj/project.pbxproj
@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* MattermostTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* MattermostTests.m */; };
 		0111A42B7F264BCF8CBDE3ED /* OpenSans-ExtraBoldItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FBBEC29EE2D3418D9AC33BD5 /* OpenSans-ExtraBoldItalic.ttf */; };
@ -266,6 +265,7 @@
 		D4B1B363C2414DA19C1AC521 /* OpenSans-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-Bold.ttf"; path = "../assets/fonts/OpenSans-Bold.ttf"; sourceTree = "<group>"; };
 		EB4F0DF36537B0B21BE962FB /* Pods-Mattermost.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Mattermost.debug.xcconfig"; path = "Target Support Files/Pods-Mattermost/Pods-Mattermost.debug.xcconfig"; sourceTree = "<group>"; };
 		FBBEC29EE2D3418D9AC33BD5 /* OpenSans-ExtraBoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-ExtraBoldItalic.ttf"; path = "../assets/fonts/OpenSans-ExtraBoldItalic.ttf"; sourceTree = "<group>"; };
+		81061F4CBB31484A94D5A8EE /* libz.tbd */ = {isa = PBXFileReference; name = "libz.tbd"; path = "usr/lib/libz.tbd"; sourceTree = SDKROOT; fileEncoding = undefined; lastKnownFileType = sourcecode.text-based-dylib-definition; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@ -815,6 +815,58 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		1D22DC6FC0A37F7F657B8274 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${SRCROOT}/Pods/Target Support Files/Pods-Mattermost/Pods-Mattermost-resources.sh",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-youtube/assets/YTPlayerView-iframe-player.html",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/YTPlayerView-iframe-player.html",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${SRCROOT}/Pods/Target Support Files/Pods-Mattermost/Pods-Mattermost-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		AE4769B235D14E6C9C64EA78 /* Upload Debug Symbols to Sentry */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -25,6 +25,15 @@ PODS:
    - React
  - KeyboardTrackingView (5.5.0):
    - React
+  - libwebp (1.0.3):
+    - libwebp/demux (= 1.0.3)
+    - libwebp/mux (= 1.0.3)
+    - libwebp/webp (= 1.0.3)
+  - libwebp/demux (1.0.3):
+    - libwebp/webp
+  - libwebp/mux (1.0.3):
+    - libwebp/demux
+  - libwebp/webp (1.0.3)
  - RCTRequired (0.61.2)
  - RCTTypeSafety (0.61.2):
    - FBLazyVector (= 0.61.2)
@ -259,6 +268,10 @@ PODS:
    - React
  - RNDeviceInfo (2.1.2):
    - React
+  - RNFastImage (7.0.2):
+    - React
+    - SDWebImage (~> 5.0)
+    - SDWebImageWebPCoder (~> 0.2.3)
  - RNGestureHandler (1.4.1):
    - React
  - RNKeychain (4.0.1):
@ -274,6 +287,12 @@ PODS:
    - React
  - RNVectorIcons (6.6.0):
    - React
+  - SDWebImage (5.2.2):
+    - SDWebImage/Core (= 5.2.2)
+  - SDWebImage/Core (5.2.2)
+  - SDWebImageWebPCoder (0.2.5):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.0)
  - Sentry (4.4.0):
    - Sentry/Core (= 4.4.0)
  - Sentry/Core (4.4.0)
@ -329,6 +348,7 @@ DEPENDENCIES:
  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
+  - RNFastImage (from `../node_modules/react-native-fast-image`)
  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
  - RNKeychain (from `../node_modules/react-native-keychain`)
  - RNReactNativeDocViewer (from `../node_modules/react-native-doc-viewer`)
@ -343,6 +363,9 @@ DEPENDENCIES:
 SPEC REPOS:
  https://github.com/cocoapods/specs.git:
    - boost-for-react-native
+    - libwebp
+    - SDWebImage
+    - SDWebImageWebPCoder
    - Sentry
    - Swime
    - XCDYouTubeKit
@ -435,6 +458,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-community/async-storage"
  RNDeviceInfo:
    :path: "../node_modules/react-native-device-info"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
  RNGestureHandler:
    :path: "../node_modules/react-native-gesture-handler"
  RNKeychain:
@ -462,6 +487,7 @@ SPEC CHECKSUMS:
  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
  jail-monkey: 0830c18bb6f085938a4c8529d554f9b29230a5a4
  KeyboardTrackingView: d4d7236123b401ed9b1e02869e7943117740c522
+  libwebp: 057912d6d0abfb6357d8bb05c0ea470301f5d61e
  RCTRequired: c639d59ed389cfb1f1203f65c2ea946d8ec586e2
  RCTTypeSafety: dc23fb655d6c77667c78e327bf661bc11e3b8aec
  RCTYouTube: a36b9960e040063877fb8dc61fff19d3bd1a97ff
@ -497,6 +523,7 @@ SPEC CHECKSUMS:
  rn-fetch-blob: 3258c6483235bb7daf16cf921306ffb18406071f
  RNCAsyncStorage: 5ae4d57458804e99f73d427214442a6b10a53856
  RNDeviceInfo: fd8296de6fca8b743cdc499b896f48e8a9f1faf5
+  RNFastImage: 9b0c22643872bb7494c8d87bbbb66cc4c0d9e7a2
  RNGestureHandler: 4cb47a93019c1a201df2644413a0a1569a51c8aa
  RNKeychain: 45dbd50d1ac4bd42c3740f76ffb135abf05746d0
  RNReactNativeDocViewer: 571c6ac38483531b8fb521d02a6ba54652ed10a7
@ -504,6 +531,8 @@ SPEC CHECKSUMS:
  RNSentry: 2803ba8c8129dcf26b79e9b4d8c80168be6e4390
  RNSVG: be27aa7c58819f97399388ae53d7fa0572f32c7f
  RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
+  SDWebImage: 5fcdb02cc35e05fc35791ec514b191d27189f872
+  SDWebImageWebPCoder: 947093edd1349d820c40afbd9f42acb6cdecd987
  Sentry: 26650184fe71eb7476dfd2737acb5ea6cc64b4b1
  Swime: d7b2c277503b6cea317774aedc2dce05613f8b0b
  XCDYouTubeKit: 4ca4e3322fa556ec1c32932d378365c15ce1386e
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
    "react-native-document-picker": "3.2.4",
    "react-native-exception-handler": "2.10.8",
    "react-native-gesture-handler": "1.4.1",
+    "react-native-fast-image": "7.0.2",
    "react-native-haptic-feedback": "1.8.2",
    "react-native-image-gallery": "github:mattermost/react-native-image-gallery#c1a9f7118e90cc87d47620bc0584c9cac4b0cf38",
    "react-native-image-picker": "0.28.1",