Update RN to version 0.57.0 (#2131)

.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [ "react-native" ],
-  "env": {
-    "production": {
-      "plugins": ["transform-remove-console"]
-    }
-  },
-  "plugins": [
-    ["module-resolver", {
-      "root": ["./src", "."],
-      "alias": {
-        "assets": "./dist/assets"
-      }
-    }]
-  ]
-}

.flowconfig

@@ -16,33 +16,55 @@
 ; Ignore polyfills
 .*/Libraries/polyfills/.*
 
+; Ignore metro
+.*/node_modules/metro/.*
+
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 
 [options]
 emoji=true
 
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
 module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
 
 munge_underscores=true
 
 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\)$' -> 'RelativeImageStub'
 
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.56.0
+^0.78.0

.gitignore

@@ -33,7 +33,6 @@ xcshareddata/
 
 # Android/IntelliJ
 #
-build/
 .idea
 .gradle
 local.properties
@@ -69,10 +68,11 @@ tags
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-fastlane/report.xml
-fastlane/Preview.html
+*/fastlane/report.xml
+*/fastlane/Preview.html
 */fastlane/screenshots
 fastlane/.env
+fastlane/report.xml
 
 # Sentry
 android/sentry.properties
@@ -85,6 +85,8 @@ ios/sentry.properties
 .podinstall
 ios/Pods/
 
+# Bundle artifact
+*.jsbundle
+
 #editor-settings
 .vscode
-

Makefile

@@ -60,8 +60,6 @@ clean: ## Cleans dependencies, previous builds and temp files
 	@echo Cleanup finished
 
 post-install:
-	@./node_modules/.bin/remotedev-debugger --hostname localhost --port 5678 --injectserver
-	@# Must remove the .babelrc for 0.42.0 to work correctly
 	@# Need to copy custom ImagePickerModule.java that implements correct permission checks for android
 	@rm node_modules/react-native-image-picker/android/src/main/java/com/imagepicker/ImagePickerModule.java
 	@cp ./native_modules/ImagePickerModule.java node_modules/react-native-image-picker/android/src/main/java/com/imagepicker

android/app/BUCK

@@ -45,13 +45,13 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.mattermost-mobile",
+    package = "com.mattermost.rnbeta",
 )
 
 android_resource(
-  name = "res",
-  res = "src/main/res",
-  package = "com.mattermost.rnbeta",
+    name = "res",
+    package = "com.mattermost.rnbeta",
+    res = "src/main/res",
 )
 
 android_binary(

android/app/build.gradle

@@ -74,8 +74,9 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     entryFile: "index.js",
-    bundleCommand: "unbundle",
-    bundleConfig: "packager/config.js"
+    bundleCommand: "ram-bundle",
+    bundleConfig: "packager-config.js",
+    extraPackagerArgs: ["--max-workers=4"]
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -111,8 +112,8 @@ android {
 
     defaultConfig {
         applicationId "com.mattermost.rnbeta"
-        minSdkVersion 21
-        targetSdkVersion 26
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 142
         versionName "1.13.0"
         multiDexEnabled = true
@@ -188,7 +189,7 @@ configurations.all {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
-    implementation "com.android.support:appcompat-v7:27.1.1"
+    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     implementation 'com.android.support:design:27.1.1'
     implementation 'com.android.support:percent:27.1.1'
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/proguard-rules.pro

@@ -15,56 +15,3 @@
 #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
 #   public *;
 #}
-
-# Disabling obfuscation is useful if you collect stack traces from production crashes
-# (unless you are using a system that supports de-obfuscate the stack traces).
--dontobfuscate
-
-# React Native
-
-# Keep our interfaces so they can be used by other ProGuard rules.
-# See http://sourceforge.net/p/proguard/bugs/466/
--keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
--keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
--keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
-
-# Do not strip any method/class that is annotated with @DoNotStrip
--keep @com.facebook.proguard.annotations.DoNotStrip class *
--keep @com.facebook.common.internal.DoNotStrip class *
--keepclassmembers class * {
-    @com.facebook.proguard.annotations.DoNotStrip *;
-    @com.facebook.common.internal.DoNotStrip *;
-}
-
--keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
-  void set*(***);
-  *** get*();
-}
-
--keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
--keep class * extends com.facebook.react.bridge.NativeModule { *; }
--keepclassmembers,includedescriptorclasses class * { native <methods>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
--keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
-
--dontwarn com.facebook.react.**
-
-# TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
-# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
--dontwarn android.text.StaticLayout
-
-# okhttp
-
--keepattributes Signature
--keepattributes *Annotation*
--keep class okhttp3.** { *; }
--keep interface okhttp3.** { *; }
--dontwarn okhttp3.**
-
-# okio
-
--keep class sun.misc.Unsafe { *; }
--dontwarn java.nio.file.*
--dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
--dontwarn okio.**

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.mattermost.rnbeta"
-    android:versionCode="1"
-    android:versionName="1.0">
+    package="com.mattermost.rnbeta">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
@@ -12,10 +10,6 @@
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
-    <uses-sdk
-        android:minSdkVersion="16"
-        android:targetSdkVersion="22" />
-
     <application
       android:name=".MainApplication"
       android:allowBackup="true"
@@ -30,9 +24,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:windowSoftInputMode="adjustResize"
         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" />

android/app/src/main/res/values/strings.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0"?>
 <resources>
     <string name="app_name">Mattermost Beta</string>
     <string name="inAppPinCode_title">in-App Pincode</string>

android/build.gradle

@@ -1,12 +1,19 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
+    ext {
+        buildToolsVersion = "27.0.3"
+        minSdkVersion = 21
+        compileSdkVersion = 27
+        targetSdkVersion = 26
+        supportLibVersion = "27.1.1"
+    }
     repositories {
-        google()
         jcenter()
+        google()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.0.0'
+        classpath 'com.android.tools.build:gradle:3.1.4'
         classpath 'com.google.gms:google-services:3.2.0'
 
         // NOTE: Do not place your application dependencies here; they belong
@@ -14,6 +21,19 @@ buildscript {
     }
 }
 
+subprojects {
+    afterEvaluate {
+        android {
+            compileSdkVersion rootProject.ext.compileSdkVersion
+            buildToolsVersion rootProject.ext.buildToolsVersion
+            defaultConfig {
+                minSdkVersion rootProject.ext.minSdkVersion
+                targetSdkVersion rootProject.ext.targetSdkVersion
+            }
+        }
+    }
+}
+
 allprojects {
     repositories {
         google()
@@ -30,17 +50,8 @@ allprojects {
     }
 }
 
-ext {
-    compileSdkVersion = 26
-    buildToolsVersion = '26.0.2'
-}
-subprojects { subproject ->
-    afterEvaluate{
-        if((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
-            android {
-                compileSdkVersion rootProject.ext.compileSdkVersion
-                buildToolsVersion rootProject.ext.buildToolsVersion
-            }
-        }
-    }
+
+task wrapper(type: Wrapper) {
+    gradleVersion = '4.4'
+    distributionUrl = distributionUrl.replace("bin", "all")
 }

android/gradle.properties

@@ -18,5 +18,5 @@ org.gradle.jvmargs=-Xmx2048M
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
-android.enableAapt2=false
-android.useDeprecatedNdk=true
+#android.enableAapt2=false
+#android.useDeprecatedNdk=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

android/gradlew

@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 
 ##############################################################################
 ##
@@ -6,47 +6,6 @@
 ##
 ##############################################################################
 
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS=""
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn ( ) {
-    echo "$*"
-}
-
-die ( ) {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-esac
-
-# For Cygwin, ensure paths are in UNIX format before anything is touched.
-if $cygwin ; then
-    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
-fi
-
 # Attempt to set APP_HOME
 # Resolve links: $0 may be a link
 PRG="$0"
@@ -61,9 +20,49 @@ while [ -h "$PRG" ] ; do
     fi
 done
 SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >&-
+cd "`dirname \"$PRG\"`/" >/dev/null
 APP_HOME="`pwd -P`"
-cd "$SAVED" >&-
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
@@ -90,7 +89,7 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
     MAX_FD_LIMIT=`ulimit -H -n`
     if [ $? -eq 0 ] ; then
         if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
@@ -114,6 +113,7 @@ fi
 if $cygwin ; 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
     ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
@@ -154,11 +154,19 @@ if $cygwin ; then
     esac
 fi
 
-# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
-function splitJvmOpts() {
-    JVM_OPTS=("$@")
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
 }
-eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
-JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
+APP_ARGS=$(save "$@")
 
-exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -8,14 +8,14 @@
 @rem Set local scope for the variables with windows NT shell
 if "%OS%"=="Windows_NT" setlocal
 
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS=
-
 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 
@@ -46,10 +46,9 @@ echo location of your Java installation.
 goto fail
 
 :init
-@rem Get command-line arguments, handling Windowz variants
+@rem Get command-line arguments, handling Windows variants
 
 if not "%OS%" == "Windows_NT" goto win9xME_args
-if "%@eval[2+2]" == "4" goto 4NT_args
 
 :win9xME_args
 @rem Slurp the command line arguments.
@@ -60,11 +59,6 @@ set _SKIP=2
 if "x%~1" == "x" goto execute
 
 set CMD_LINE_ARGS=%*
-goto execute
-
-:4NT_args
-@rem Get arguments from the 4NT Shell from JP Software
-set CMD_LINE_ARGS=%$
 
 :execute
 @rem Setup the command line

app/app.js

@@ -55,7 +55,7 @@ export default class App {
         if (Platform.OS === 'ios') {
             const majorVersionIOS = parseInt(Platform.Version, 10);
             if (majorVersionIOS < 10) {
-                require('babel-polyfill');
+                require('@babel/polyfill');
             }
         }
 

app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap

@@ -36,9 +36,7 @@ ShallowWrapper {
           }
         }
       >
-        <Text
-          accessible={true}
-          allowFontScaling={true}
+        <Component
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
@@ -57,7 +55,7 @@ ShallowWrapper {
           <RemoveMarkdown
             value="Banner Text"
           />
-        </Text>
+        </Component>
         <Icon
           allowFontScaling={false}
           color="#fff"
@@ -87,9 +85,7 @@ ShallowWrapper {
       "props": Object {
         "activeOpacity": 0.2,
         "children": Array [
-          <Text
-            accessible={true}
-            allowFontScaling={true}
+          <Component
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -108,7 +104,7 @@ ShallowWrapper {
             <RemoveMarkdown
               value="Banner Text"
             />
-          </Text>,
+          </Component>,
           <Icon
             allowFontScaling={false}
             color="#fff"
@@ -130,8 +126,6 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "class",
           "props": Object {
-            "accessible": true,
-            "allowFontScaling": true,
             "children": <RemoveMarkdown
               value="Banner Text"
             />,
@@ -198,9 +192,7 @@ ShallowWrapper {
             }
           }
         >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
+          <Component
             ellipsizeMode="tail"
             numberOfLines={1}
             style={
@@ -219,7 +211,7 @@ ShallowWrapper {
             <RemoveMarkdown
               value="Banner Text"
             />
-          </Text>
+          </Component>
           <Icon
             allowFontScaling={false}
             color="#fff"
@@ -249,9 +241,7 @@ ShallowWrapper {
         "props": Object {
           "activeOpacity": 0.2,
           "children": Array [
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -270,7 +260,7 @@ ShallowWrapper {
               <RemoveMarkdown
                 value="Banner Text"
               />
-            </Text>,
+            </Component>,
             <Icon
               allowFontScaling={false}
               color="#fff"
@@ -292,8 +282,6 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "accessible": true,
-              "allowFontScaling": true,
               "children": <RemoveMarkdown
                 value="Banner Text"
               />,

app/components/custom_list/__snapshots__/index.test.js.snap

@@ -255,10 +255,7 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
       }
     }
   >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
+    <Component
       style={
         Object {
           "color": "#aaa",
@@ -267,7 +264,7 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
       }
     >
       section_id
-    </Text>
+    </Component>
   </Component>
 </Component>
 `;

app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap

@@ -43,10 +43,7 @@ ShallowWrapper {
           }
         >
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <Component
               style={
                 Object {
                   "color": undefined,
@@ -55,12 +52,10 @@ ShallowWrapper {
               }
             >
               user
-            </Text>
+            </Component>
           </Component>
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -72,7 +67,7 @@ ShallowWrapper {
               }
             >
               (@user)
-            </Text>
+            </Component>
           </Component>
         </Component>,
       ],
@@ -104,10 +99,7 @@ ShallowWrapper {
         "props": Object {
           "children": Array [
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -116,12 +108,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>,
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -133,7 +123,7 @@ ShallowWrapper {
                 }
               >
                 (@user)
-              </Text>
+              </Component>
             </Component>,
           ],
           "style": Object {
@@ -148,10 +138,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              "children": <Component
                 style={
                   Object {
                     "color": undefined,
@@ -160,7 +147,7 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>,
+              </Component>,
             },
             "ref": null,
             "rendered": Object {
@@ -168,10 +155,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": "user",
-                "ellipsizeMode": "tail",
                 "style": Object {
                   "color": undefined,
                   "fontSize": 15,
@@ -188,9 +172,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
+              "children": <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -202,7 +184,7 @@ ShallowWrapper {
                 }
               >
                 (@user)
-              </Text>,
+              </Component>,
             },
             "ref": null,
             "rendered": Object {
@@ -210,8 +192,6 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": "(@user)",
                 "ellipsizeMode": "tail",
                 "numberOfLines": 1,
@@ -253,10 +233,7 @@ ShallowWrapper {
             }
           >
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -265,12 +242,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -282,7 +257,7 @@ ShallowWrapper {
                 }
               >
                 (@user)
-              </Text>
+              </Component>
             </Component>
           </Component>,
         ],
@@ -314,10 +289,7 @@ ShallowWrapper {
           "props": Object {
             "children": Array [
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -326,12 +298,10 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>
+                </Component>
               </Component>,
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -343,7 +313,7 @@ ShallowWrapper {
                   }
                 >
                   (@user)
-                </Text>
+                </Component>
               </Component>,
             ],
             "style": Object {
@@ -358,10 +328,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                "children": <Component
                   style={
                     Object {
                       "color": undefined,
@@ -370,7 +337,7 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>,
+                </Component>,
               },
               "ref": null,
               "rendered": Object {
@@ -378,10 +345,7 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "user",
-                  "ellipsizeMode": "tail",
                   "style": Object {
                     "color": undefined,
                     "fontSize": 15,
@@ -398,9 +362,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                "children": <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -412,7 +374,7 @@ ShallowWrapper {
                   }
                 >
                   (@user)
-                </Text>,
+                </Component>,
               },
               "ref": null,
               "rendered": Object {
@@ -420,8 +382,6 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "(@user)",
                   "ellipsizeMode": "tail",
                   "numberOfLines": 1,
@@ -514,10 +474,7 @@ ShallowWrapper {
           }
         >
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <Component
               style={
                 Object {
                   "color": undefined,
@@ -526,12 +483,10 @@ ShallowWrapper {
               }
             >
               user
-            </Text>
+            </Component>
           </Component>
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -573,10 +528,7 @@ ShallowWrapper {
         "props": Object {
           "children": Array [
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -585,12 +537,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>,
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -615,10 +565,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              "children": <Component
                 style={
                   Object {
                     "color": undefined,
@@ -627,7 +574,7 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>,
+              </Component>,
             },
             "ref": null,
             "rendered": Object {
@@ -635,10 +582,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": "user",
-                "ellipsizeMode": "tail",
                 "style": Object {
                   "color": undefined,
                   "fontSize": 15,
@@ -655,9 +599,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
+              "children": <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -675,8 +617,6 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": undefined,
                 "ellipsizeMode": "tail",
                 "numberOfLines": 1,
@@ -718,10 +658,7 @@ ShallowWrapper {
             }
           >
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -730,12 +667,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -777,10 +712,7 @@ ShallowWrapper {
           "props": Object {
             "children": Array [
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -789,12 +721,10 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>
+                </Component>
               </Component>,
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -819,10 +749,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                "children": <Component
                   style={
                     Object {
                       "color": undefined,
@@ -831,7 +758,7 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>,
+                </Component>,
               },
               "ref": null,
               "rendered": Object {
@@ -839,10 +766,7 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "user",
-                  "ellipsizeMode": "tail",
                   "style": Object {
                     "color": undefined,
                     "fontSize": 15,
@@ -859,9 +783,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                "children": <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -879,8 +801,6 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": undefined,
                   "ellipsizeMode": "tail",
                   "numberOfLines": 1,
@@ -991,10 +911,7 @@ ShallowWrapper {
           }
         >
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <Component
               style={
                 Object {
                   "color": undefined,
@@ -1003,12 +920,10 @@ ShallowWrapper {
               }
             >
               user
-            </Text>
+            </Component>
           </Component>
           <Component>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -1050,10 +965,7 @@ ShallowWrapper {
         "props": Object {
           "children": Array [
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -1062,12 +974,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>,
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -1092,10 +1002,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              "children": <Component
                 style={
                   Object {
                     "color": undefined,
@@ -1104,7 +1011,7 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>,
+              </Component>,
             },
             "ref": null,
             "rendered": Object {
@@ -1112,10 +1019,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": "user",
-                "ellipsizeMode": "tail",
                 "style": Object {
                   "color": undefined,
                   "fontSize": 15,
@@ -1132,9 +1036,7 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
+              "children": <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -1152,8 +1054,6 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": undefined,
                 "ellipsizeMode": "tail",
                 "numberOfLines": 1,
@@ -1195,10 +1095,7 @@ ShallowWrapper {
             }
           >
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -1207,12 +1104,10 @@ ShallowWrapper {
                 }
               >
                 user
-              </Text>
+              </Component>
             </Component>
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -1254,10 +1149,7 @@ ShallowWrapper {
           "props": Object {
             "children": Array [
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -1266,12 +1158,10 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>
+                </Component>
               </Component>,
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -1296,10 +1186,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                "children": <Component
                   style={
                     Object {
                       "color": undefined,
@@ -1308,7 +1195,7 @@ ShallowWrapper {
                   }
                 >
                   user
-                </Text>,
+                </Component>,
               },
               "ref": null,
               "rendered": Object {
@@ -1316,10 +1203,7 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "user",
-                  "ellipsizeMode": "tail",
                   "style": Object {
                     "color": undefined,
                     "fontSize": 15,
@@ -1336,9 +1220,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                "children": <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -1356,8 +1238,6 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": undefined,
                   "ellipsizeMode": "tail",
                   "numberOfLines": 1,

app/components/emoji/emoji.js

@@ -5,7 +5,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
     Image,
-    PixelRatio,
     Platform,
     StyleSheet,
     Text,
@@ -107,7 +106,7 @@ export default class Emoji extends React.PureComponent {
         if (!size && textStyle) {
             const flatten = StyleSheet.flatten(textStyle);
             fontSize = flatten.fontSize;
-            size = fontSize * (Platform.OS === 'android' ? PixelRatio.get() : 1);
+            size = fontSize;
         }
 
         if (displayTextOnly) {

app/components/file_attachment_list/file_attachment_icon.js

@@ -4,14 +4,13 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
+    Image,
     View,
     StyleSheet,
 } from 'react-native';
 
 import * as Utils from 'mattermost-redux/utils/file_utils';
 
-import ProgressiveImage from 'app/components/progressive_image';
-
 import audioIcon from 'assets/images/icons/audio.png';
 import codeIcon from 'assets/images/icons/code.png';
 import excelIcon from 'assets/images/icons/excel.png';
@@ -75,9 +74,9 @@ export default class FileAttachmentIcon extends PureComponent {
                 ref={this.handleCaptureRef}
                 style={[styles.fileIconWrapper, {height: wrapperHeight, width: wrapperWidth}]}
             >
-                <ProgressiveImage
+                <Image
                     style={[styles.icon, {height: iconHeight, width: iconWidth}]}
-                    defaultSource={source}
+                    source={source}
                 />
             </View>
         );

app/components/markdown/__snapshots__/hashtag.test.js.snap

@@ -26,10 +26,7 @@ ShallowWrapper {
     "key": undefined,
     "nodeType": "class",
     "props": Object {
-      "accessible": true,
-      "allowFontScaling": true,
       "children": "#test",
-      "ellipsizeMode": "tail",
       "onPress": [Function],
       "style": Object {
         "color": "red",
@@ -45,10 +42,7 @@ ShallowWrapper {
       "key": undefined,
       "nodeType": "class",
       "props": Object {
-        "accessible": true,
-        "allowFontScaling": true,
         "children": "#test",
-        "ellipsizeMode": "tail",
         "onPress": [Function],
         "style": Object {
           "color": "red",

app/components/markdown/markdown_image/markdown_image.js

@@ -12,7 +12,6 @@ import {
     StyleSheet,
     Text,
     TouchableHighlight,
-    TouchableWithoutFeedback,
     View,
 } from 'react-native';
 
@@ -226,7 +225,7 @@ export default class MarkdownImage extends React.Component {
                 }
 
                 image = (
-                    <TouchableWithoutFeedback
+                    <TouchableHighlight
                         onLongPress={this.handleLinkLongPress}
                         onPress={this.handlePreviewImage}
                         style={{width, height}}
@@ -237,7 +236,7 @@ export default class MarkdownImage extends React.Component {
                             resizeMode='contain'
                             style={{width, height}}
                         />
-                    </TouchableWithoutFeedback>
+                    </TouchableHighlight>
                 );
             }
         } else if (this.state.failed) {

app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap

@@ -21,9 +21,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
       }
     }
   >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
+    <Component
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
@@ -35,7 +33,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
       }
     >
       Mattermost
-    </Text>
+    </Component>
   </Component>
   <Component
     style={
@@ -54,9 +52,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
         }
       }
     >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
+      <Component
         ellipsizeMode="tail"
         numberOfLines={3}
         style={
@@ -73,7 +69,7 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri
         }
       >
         Title
-      </Text>
+      </Component>
     </TouchableOpacity>
   </Component>
 </Component>
@@ -89,9 +85,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescr
     }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
+  <Component
     ellipsizeMode="tail"
     numberOfLines={5}
     style={
@@ -103,7 +97,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderDescr
     }
   >
     Description
-  </Text>
+  </Component>
 </Component>
 `;
 
@@ -126,7 +120,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
       }
     }
   >
-    <Image
+    <Component
       resizeMode="contain"
       style={
         Array [

app/components/post_textbox/post_textbox.js

@@ -12,7 +12,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import AttachmentButton from 'app/components/attachment_button';
 import Autocomplete from 'app/components/autocomplete';
 import FileUploadPreview from 'app/components/file_upload_preview';
-import QuickTextInput from 'app/components/quick_text_input';
 import {INITIAL_HEIGHT, INSERT_TO_COMMENT, INSERT_TO_DRAFT, IS_REACTION_REGEX, MAX_CONTENT_HEIGHT, MAX_FILE_COUNT} from 'app/constants/post_textbox';
 import {confirmOutOfOfficeDisabled} from 'app/utils/status';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@@ -550,8 +549,6 @@ export default class PostTextbox extends PureComponent {
             inputContainerStyle.push(style.inputContainerWithoutFileUpload);
         }
 
-        const InputComponent = Platform.OS === 'android' ? TextInput : QuickTextInput;
-
         return (
             <View>
                 <Typing/>
@@ -572,7 +569,7 @@ export default class PostTextbox extends PureComponent {
                 {!channelIsArchived && <View style={style.inputWrapper}>
                     {!channelIsReadOnly && attachmentButton}
                     <View style={[inputContainerStyle, (channelIsReadOnly && {marginLeft: 10})]}>
-                        <InputComponent
+                        <TextInput
                             ref='input'
                             value={textValue}
                             onChangeText={this.handleTextChange}

app/components/progressive_image/progressive_image.js

@@ -24,6 +24,10 @@ export default class ProgressiveImage extends PureComponent {
         tintDefaultSource: PropTypes.bool,
     };
 
+    static defaultProps = {
+        style: {},
+    };
+
     constructor(props) {
         super(props);
 
@@ -63,10 +67,10 @@ export default class ProgressiveImage extends PureComponent {
 
     load = (props) => {
         const {filename, imageUri, style, thumbnailUri} = props;
-        this.style = [
-            StyleSheet.absoluteFill,
-            ...style,
-        ];
+        this.computedStyle = StyleSheet.absoluteFill;
+        if (Object.keys(style).length) {
+            this.style = Object.assign({}, StyleSheet.absoluteFill, style);
+        }
 
         if (thumbnailUri) {
             ImageCacheManager.cache(filename, thumbnailUri, this.setThumbnail);
@@ -105,8 +109,7 @@ export default class ProgressiveImage extends PureComponent {
     };
 
     render() {
-        const {style, defaultSource, isBackgroundImage, theme, tintDefaultSource, ...otherProps} = this.props;
-        const {style: computedStyle} = this;
+        const {style, defaultSource, isBackgroundImage, theme, tintDefaultSource, onError, resizeMode, resizeMethod} = this.props;
         const {uri, intensity, thumb} = this.state;
         const hasDefaultSource = Boolean(defaultSource);
         const hasPreview = Boolean(thumb);
@@ -132,10 +135,11 @@ export default class ProgressiveImage extends PureComponent {
             defaultImage = (
                 <View style={styles.defaultImageContainer}>
                     <DefaultComponent
-                        {...otherProps}
                         source={defaultSource}
                         style={{flex: 1, tintColor: changeOpacity(theme.centerChannelColor, 0.2)}}
                         resizeMode='center'
+                        resizeMethod={resizeMethod}
+                        onError={onError}
                     >
                         {this.props.children}
                     </DefaultComponent>
@@ -144,9 +148,11 @@ export default class ProgressiveImage extends PureComponent {
         } else {
             defaultImage = (
                 <DefaultComponent
-                    {...otherProps}
+                    resizeMode={resizeMode}
+                    resizeMethod={resizeMethod}
+                    onError={onError}
                     source={defaultSource}
-                    style={computedStyle}
+                    style={this.computedStyle}
                 >
                     {this.props.children}
                 </DefaultComponent>
@@ -158,9 +164,11 @@ export default class ProgressiveImage extends PureComponent {
                 {(hasDefaultSource && !hasPreview && !hasURI) && defaultImage}
                 {hasPreview && !isImageReady &&
                 <ImageComponent
-                    {...otherProps}
+                    resizeMode={resizeMode}
+                    resizeMethod={resizeMethod}
+                    onError={onError}
                     source={{uri: thumb}}
-                    style={computedStyle}
+                    style={this.computedStyle}
                     blurRadius={5}
                 >
                     {this.props.children}
@@ -168,15 +176,17 @@ export default class ProgressiveImage extends PureComponent {
                 }
                 {isImageReady &&
                 <ImageComponent
-                    {...otherProps}
+                    resizeMode={resizeMode}
+                    resizeMethod={resizeMethod}
+                    onError={onError}
                     source={{uri}}
-                    style={computedStyle}
+                    style={this.computedStyle}
                 >
                     {this.props.children}
                 </ImageComponent>
                 }
                 {hasPreview &&
-                <Animated.View style={[computedStyle, {backgroundColor: theme.centerChannelBg, opacity}]}/>
+                <Animated.View style={[this.computedStyle, {backgroundColor: theme.centerChannelBg, opacity}]}/>
                 }
             </View>
         );

app/components/quick_text_input.js

@@ -1,128 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {TextInput} from 'react-native';
-
-// A component that can be used to make partially-controlled inputs that can be updated
-// by changing the value prop without lagging the UI.
-//
-// We're using this in place of a connected TextInput due to changes made in RN v0.54
-// that break input in Chinese and Japanese when using a connected TextInput. See
-// https://github.com/facebook/react-native/issues/18403 for more information.
-//
-// In addition to that, there's also an ugly hack to change the key on the TextInput
-// when this is triggered because that same version made setNativeProps work inconsistently.
-// See https://github.com/facebook/react-native/issues/18272 for more information on that.
-export default class QuickTextInput extends React.PureComponent {
-    static propTypes = {
-
-        editable: PropTypes.bool,
-        onChangeText: PropTypes.func,
-
-        /**
-         * The string value displayed in this input
-         */
-        value: PropTypes.string.isRequired,
-        refocusInput: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        refocusInput: true,
-        delayInputUpdate: false,
-        editable: true,
-        value: '',
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.storedValue = props.value;
-
-        this.state = {
-            key: 0,
-        };
-    }
-
-    componentDidMount() {
-        this.updateInputFromProps();
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
-        // This will force the base TextInput to re-render if the value is changing
-        // from something other than the user typing in it. This does however cause
-        // the TextInput to flicker when this happens.
-        if (nextProps.value !== this.storedValue) {
-            this.setState({
-                key: this.state.key + 1,
-            });
-        }
-
-        this.hadFocus = this.input.isFocused() && this.props.refocusInput;
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.value !== this.storedValue || !this.props.editable) {
-            this.updateInputFromProps();
-        }
-
-        if (prevState.key !== this.state.key && this.hadFocus) {
-            this.input.focus();
-        }
-    }
-
-    updateInputFromProps = () => {
-        if (!this.input) {
-            return;
-        }
-
-        this.input.setNativeProps({text: this.props.value});
-        this.storedValue = this.props.value;
-    }
-
-    setNativeProps(nativeProps) {
-        this.input.setNativeProps(nativeProps);
-    }
-
-    isFocused() {
-        return this.input.isFocused();
-    }
-
-    focus() {
-        this.input.focus();
-    }
-
-    blur() {
-        this.input.blur();
-    }
-
-    handleChangeText = (value) => {
-        this.storedValue = value;
-
-        if (this.props.onChangeText) {
-            this.props.onChangeText(value);
-        }
-    }
-
-    setInput = (input) => {
-        this.input = input;
-    }
-
-    render() {
-        const props = {...this.props};
-
-        // Specifying a value or defaultValue cause the issues noted above
-        Reflect.deleteProperty(props, 'value');
-        Reflect.deleteProperty(props, 'defaultValue');
-
-        return (
-            <TextInput
-                {...props}
-                key={this.state.key}
-                onChangeText={this.handleChangeText}
-                ref={this.setInput}
-            />
-        );
-    }
-}

app/components/search_bar/search_bar.android.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import {
     InteractionManager,
     Keyboard,
+    TextInput,
+    TouchableWithoutFeedback,
     StyleSheet,
     View,
-    TouchableWithoutFeedback,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
-import QuickTextInput from 'app/components/quick_text_input';
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import {changeOpacity} from 'app/utils/theme';
 
@@ -215,7 +215,7 @@ export default class SearchBarAndroid extends PureComponent {
                             color={tintColorSearch || placeholderTextColor}
                         />
                     }
-                    <QuickTextInput
+                    <TextInput
                         ref='input'
                         blurOnSubmit={blurOnSubmit}
                         refocusInput={this.state.refocusInput}

app/components/show_more_button/__snapshots__/show_more_button.test.js.snap

@@ -4,14 +4,11 @@ exports[`ShowMoreButton should match, button snapshot 1`] = `
 <Component
   style={Object {}}
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <Component
     style={Object {}}
   >
     +
-  </Text>
+  </Component>
   <FormattedText
     defaultMessage="Show More"
     id="post_info.message.show_more"
@@ -24,14 +21,11 @@ exports[`ShowMoreButton should match, button snapshot 2`] = `
 <Component
   style={Object {}}
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <Component
     style={Object {}}
   >
     -
-  </Text>
+  </Component>
   <FormattedText
     defaultMessage="Show Less"
     id="post_info.message.show_less"
@@ -151,10 +145,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -165,7 +156,7 @@ ShallowWrapper {
                 }
               >
                 +
-              </Text>
+              </Component>
               <FormattedText
                 defaultMessage="Show More"
                 id="post_info.message.show_more"
@@ -268,10 +259,7 @@ ShallowWrapper {
                   }
                 }
               >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -282,7 +270,7 @@ ShallowWrapper {
                   }
                 >
                   +
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Show More"
                   id="post_info.message.show_more"
@@ -350,10 +338,7 @@ ShallowWrapper {
                   }
                 }
               >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -364,7 +349,7 @@ ShallowWrapper {
                   }
                 >
                   +
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Show More"
                   id="post_info.message.show_more"
@@ -394,10 +379,7 @@ ShallowWrapper {
               "nodeType": "class",
               "props": Object {
                 "children": Array [
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": undefined,
@@ -408,7 +390,7 @@ ShallowWrapper {
                     }
                   >
                     +
-                  </Text>,
+                  </Component>,
                   <FormattedText
                     defaultMessage="Show More"
                     id="post_info.message.show_more"
@@ -434,10 +416,7 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "accessible": true,
-                    "allowFontScaling": true,
                     "children": "+",
-                    "ellipsizeMode": "tail",
                     "style": Object {
                       "color": undefined,
                       "fontSize": 16,
@@ -583,10 +562,7 @@ ShallowWrapper {
                   }
                 }
               >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -597,7 +573,7 @@ ShallowWrapper {
                   }
                 >
                   +
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Show More"
                   id="post_info.message.show_more"
@@ -700,10 +676,7 @@ ShallowWrapper {
                     }
                   }
                 >
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": undefined,
@@ -714,7 +687,7 @@ ShallowWrapper {
                     }
                   >
                     +
-                  </Text>
+                  </Component>
                   <FormattedText
                     defaultMessage="Show More"
                     id="post_info.message.show_more"
@@ -782,10 +755,7 @@ ShallowWrapper {
                     }
                   }
                 >
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": undefined,
@@ -796,7 +766,7 @@ ShallowWrapper {
                     }
                   >
                     +
-                  </Text>
+                  </Component>
                   <FormattedText
                     defaultMessage="Show More"
                     id="post_info.message.show_more"
@@ -826,10 +796,7 @@ ShallowWrapper {
                 "nodeType": "class",
                 "props": Object {
                   "children": Array [
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    <Component
                       style={
                         Object {
                           "color": undefined,
@@ -840,7 +807,7 @@ ShallowWrapper {
                       }
                     >
                       +
-                    </Text>,
+                    </Component>,
                     <FormattedText
                       defaultMessage="Show More"
                       id="post_info.message.show_more"
@@ -866,10 +833,7 @@ ShallowWrapper {
                     "key": undefined,
                     "nodeType": "class",
                     "props": Object {
-                      "accessible": true,
-                      "allowFontScaling": true,
                       "children": "+",
-                      "ellipsizeMode": "tail",
                       "style": Object {
                         "color": undefined,
                         "fontSize": 16,

app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap

@@ -99,9 +99,7 @@ ShallowWrapper {
               }
               type="O"
             />
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -178,9 +176,7 @@ ShallowWrapper {
               }
               type="O"
             />
-            <Text
-              accessible={true}
-              allowFontScaling={true}
+            <Component
               ellipsizeMode="tail"
               numberOfLines={1}
               style={
@@ -249,9 +245,7 @@ ShallowWrapper {
                 }
                 type="O"
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -312,9 +306,7 @@ ShallowWrapper {
                   }
                   type="O"
                 />,
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -380,8 +372,6 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": undefined,
                   "ellipsizeMode": "tail",
                   "numberOfLines": 1,
@@ -474,9 +464,7 @@ ShallowWrapper {
                 }
                 type="O"
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -553,9 +541,7 @@ ShallowWrapper {
                 }
                 type="O"
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
+              <Component
                 ellipsizeMode="tail"
                 numberOfLines={1}
                 style={
@@ -624,9 +610,7 @@ ShallowWrapper {
                   }
                   type="O"
                 />
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
+                <Component
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={
@@ -687,9 +671,7 @@ ShallowWrapper {
                     }
                     type="O"
                   />,
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
+                  <Component
                     ellipsizeMode="tail"
                     numberOfLines={1}
                     style={
@@ -755,8 +737,6 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "accessible": true,
-                    "allowFontScaling": true,
                     "children": undefined,
                     "ellipsizeMode": "tail",
                     "numberOfLines": 1,

app/components/text_input_with_localized_placeholder.js

@@ -6,8 +6,6 @@ import PropTypes from 'prop-types';
 import {injectIntl, intlShape} from 'react-intl';
 import {TextInput} from 'react-native';
 
-import QuickTextInput from 'app/components/quick_text_input';
-
 class TextInputWithLocalizedPlaceholder extends PureComponent {
     static propTypes = {
         ...TextInput.propTypes,
@@ -31,7 +29,7 @@ class TextInputWithLocalizedPlaceholder extends PureComponent {
         }
 
         return (
-            <QuickTextInput
+            <TextInput
                 ref='input'
                 {...otherProps}
                 placeholder={placeholderString}

app/screens/edit_profile/edit_profile_item.js

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import {
     View,
     Text,
+    TextInput,
 } from 'react-native';
 
 import FormattedText from 'app/components/formatted_text';
-import QuickTextInput from 'app/components/quick_text_input';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 export default class AccountSettingsItem extends PureComponent {
@@ -67,7 +67,7 @@ export default class AccountSettingsItem extends PureComponent {
                 </View>
                 <View style={style.inputContainer}>
                     <View style={disabled ? style.disabled : null}>
-                        <QuickTextInput
+                        <TextInput
                             ref={this.channelNameRef}
                             value={value}
                             onChangeText={this.onChangeText}

app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap

@@ -39,7 +39,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -65,10 +65,7 @@ ShallowWrapper {
                   }
                 }
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Array [
                     Object {
@@ -81,7 +78,7 @@ ShallowWrapper {
                 }
               >
                 test@test.com
-              </Text>
+              </Component>
               <FormattedText
                 defaultMessage="Please check your inbox."
                 id="password_send.checkInbox"
@@ -132,7 +129,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -158,10 +155,7 @@ ShallowWrapper {
                   }
                 }
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Array [
                     Object {
@@ -174,7 +168,7 @@ ShallowWrapper {
                 }
               >
                 test@test.com
-              </Text>
+              </Component>
               <FormattedText
                 defaultMessage="Please check your inbox."
                 id="password_send.checkInbox"
@@ -200,7 +194,7 @@ ShallowWrapper {
           "nodeType": "class",
           "props": Object {
             "children": Array [
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -227,10 +221,7 @@ ShallowWrapper {
                     }
                   }
                 />
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Array [
                       Object {
@@ -243,7 +234,7 @@ ShallowWrapper {
                   }
                 >
                   test@test.com
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Please check your inbox."
                   id="password_send.checkInbox"
@@ -299,10 +290,7 @@ ShallowWrapper {
                       }
                     }
                   />,
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Array [
                         Object {
@@ -315,7 +303,7 @@ ShallowWrapper {
                     }
                   >
                     test@test.com
-                  </Text>,
+                  </Component>,
                   <FormattedText
                     defaultMessage="Please check your inbox."
                     id="password_send.checkInbox"
@@ -360,10 +348,7 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "accessible": true,
-                    "allowFontScaling": true,
                     "children": "test@test.com",
-                    "ellipsizeMode": "tail",
                     "style": Array [
                       Object {
                         "color": "#3c763d",
@@ -430,7 +415,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -456,10 +441,7 @@ ShallowWrapper {
                     }
                   }
                 />
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Array [
                       Object {
@@ -472,7 +454,7 @@ ShallowWrapper {
                   }
                 >
                   test@test.com
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Please check your inbox."
                   id="password_send.checkInbox"
@@ -523,7 +505,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -549,10 +531,7 @@ ShallowWrapper {
                     }
                   }
                 />
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Array [
                       Object {
@@ -565,7 +544,7 @@ ShallowWrapper {
                   }
                 >
                   test@test.com
-                </Text>
+                </Component>
                 <FormattedText
                   defaultMessage="Please check your inbox."
                   id="password_send.checkInbox"
@@ -591,7 +570,7 @@ ShallowWrapper {
             "nodeType": "class",
             "props": Object {
               "children": Array [
-                <Image
+                <Component
                   source={
                     Object {
                       "testUri": "../../../dist/assets/images/logo.png",
@@ -618,10 +597,7 @@ ShallowWrapper {
                       }
                     }
                   />
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Array [
                         Object {
@@ -634,7 +610,7 @@ ShallowWrapper {
                     }
                   >
                     test@test.com
-                  </Text>
+                  </Component>
                   <FormattedText
                     defaultMessage="Please check your inbox."
                     id="password_send.checkInbox"
@@ -690,10 +666,7 @@ ShallowWrapper {
                         }
                       }
                     />,
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    <Component
                       style={
                         Array [
                           Object {
@@ -706,7 +679,7 @@ ShallowWrapper {
                       }
                     >
                       test@test.com
-                    </Text>,
+                    </Component>,
                     <FormattedText
                       defaultMessage="Please check your inbox."
                       id="password_send.checkInbox"
@@ -751,10 +724,7 @@ ShallowWrapper {
                     "key": undefined,
                     "nodeType": "class",
                     "props": Object {
-                      "accessible": true,
-                      "allowFontScaling": true,
                       "children": "test@test.com",
-                      "ellipsizeMode": "tail",
                       "style": Array [
                         Object {
                           "color": "#3c763d",
@@ -891,7 +861,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -1006,7 +976,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -1096,7 +1066,7 @@ ShallowWrapper {
           "nodeType": "class",
           "props": Object {
             "children": Array [
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -1423,7 +1393,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -1538,7 +1508,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -1628,7 +1598,7 @@ ShallowWrapper {
             "nodeType": "class",
             "props": Object {
               "children": Array [
-                <Image
+                <Component
                   source={
                     Object {
                       "testUri": "../../../dist/assets/images/logo.png",
@@ -2015,7 +1985,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -2130,7 +2100,7 @@ ShallowWrapper {
               }
             }
           >
-            <Image
+            <Component
               source={
                 Object {
                   "testUri": "../../../dist/assets/images/logo.png",
@@ -2220,7 +2190,7 @@ ShallowWrapper {
           "nodeType": "class",
           "props": Object {
             "children": Array [
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -2547,7 +2517,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -2662,7 +2632,7 @@ ShallowWrapper {
                 }
               }
             >
-              <Image
+              <Component
                 source={
                   Object {
                     "testUri": "../../../dist/assets/images/logo.png",
@@ -2752,7 +2722,7 @@ ShallowWrapper {
             "nodeType": "class",
             "props": Object {
               "children": Array [
-                <Image
+                <Component
                   source={
                     Object {
                       "testUri": "../../../dist/assets/images/logo.png",

app/screens/login/login.js

@@ -12,6 +12,7 @@ import {
     Keyboard,
     StyleSheet,
     Text,
+    TextInput,
     TouchableWithoutFeedback,
     View,
 } from 'react-native';
@@ -20,7 +21,6 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
-import QuickTextInput from 'app/components/quick_text_input';
 import StatusBar from 'app/components/status_bar';
 import PushNotifications from 'app/push_notifications';
 import {GlobalStyles} from 'app/styles';
@@ -381,7 +381,7 @@ export default class Login extends PureComponent {
                             />
                         </View>
                         <ErrorText error={this.getLoginErrorMessage()}/>
-                        <QuickTextInput
+                        <TextInput
                             ref={this.loginRef}
                             value={this.props.loginId}
                             onChangeText={this.props.actions.handleLoginIdChanged}
@@ -396,7 +396,7 @@ export default class Login extends PureComponent {
                             blurOnSubmit={false}
                             disableFullscreenUI={true}
                         />
-                        <QuickTextInput
+                        <TextInput
                             ref={this.passwordRef}
                             value={this.props.password}
                             onChangeText={this.props.actions.handlePasswordChanged}

app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap

@@ -1316,10 +1316,7 @@ ShallowWrapper {
               ]
             }
           >
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <Component
               style={
                 Object {
                   "color": "#7f8180",
@@ -1329,7 +1326,7 @@ ShallowWrapper {
               }
             >
               test
-            </Text>
+            </Component>
           </Component>
           <Component
             style={
@@ -1493,10 +1490,7 @@ ShallowWrapper {
                 ]
               }
             >
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": "#7f8180",
@@ -1506,7 +1500,7 @@ ShallowWrapper {
                 }
               >
                 test
-              </Text>
+              </Component>
             </Component>,
             <Component
               style={
@@ -1615,10 +1609,7 @@ ShallowWrapper {
             "key": "2",
             "nodeType": "class",
             "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              "children": <Component
                 style={
                   Object {
                     "color": "#7f8180",
@@ -1628,7 +1619,7 @@ ShallowWrapper {
                 }
               >
                 test
-              </Text>,
+              </Component>,
               "style": Array [
                 Object {
                   "alignItems": "center",
@@ -1649,10 +1640,7 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
                 "children": "test",
-                "ellipsizeMode": "tail",
                 "style": Object {
                   "color": "#7f8180",
                   "flex": 1,
@@ -2065,10 +2053,7 @@ ShallowWrapper {
                 ]
               }
             >
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": "#7f8180",
@@ -2078,7 +2063,7 @@ ShallowWrapper {
                 }
               >
                 test
-              </Text>
+              </Component>
             </Component>
             <Component
               style={
@@ -2242,10 +2227,7 @@ ShallowWrapper {
                   ]
                 }
               >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": "#7f8180",
@@ -2255,7 +2237,7 @@ ShallowWrapper {
                   }
                 >
                   test
-                </Text>
+                </Component>
               </Component>,
               <Component
                 style={
@@ -2364,10 +2346,7 @@ ShallowWrapper {
               "key": "2",
               "nodeType": "class",
               "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                "children": <Component
                   style={
                     Object {
                       "color": "#7f8180",
@@ -2377,7 +2356,7 @@ ShallowWrapper {
                   }
                 >
                   test
-                </Text>,
+                </Component>,
                 "style": Array [
                   Object {
                     "alignItems": "center",
@@ -2398,10 +2377,7 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "test",
-                  "ellipsizeMode": "tail",
                   "style": Object {
                     "color": "#7f8180",
                     "flex": 1,

app/screens/select_server/select_server.js

@@ -14,6 +14,7 @@ import {
     StatusBar,
     StyleSheet,
     Text,
+    TextInput,
     TouchableWithoutFeedback,
     View,
 } from 'react-native';
@@ -24,7 +25,6 @@ import {Client4} from 'mattermost-redux/client';
 
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
-import QuickTextInput from 'app/components/quick_text_input';
 import {UpgradeTypes} from 'app/constants/view';
 import fetchConfig from 'app/fetch_preconfig';
 import mattermostBucket from 'app/mattermost_bucket';
@@ -457,7 +457,7 @@ export default class SelectServer extends PureComponent {
                                 defaultMessage='Enter Server URL'
                             />
                         </View>
-                        <QuickTextInput
+                        <TextInput
                             ref={this.inputRef}
                             value={url}
                             editable={!inputDisabled}

app/screens/sso/sso.js

@@ -79,7 +79,6 @@ class SSO extends PureComponent {
             error: null,
             renderWebView: false,
             jsCode: '',
-            scalePagesToFit: false,
         };
 
         switch (props.ssoType) {
@@ -99,7 +98,7 @@ class SSO extends PureComponent {
     }
 
     clearPreviousCookies = () => {
-        CookieManager.clearAll().then(() => {
+        CookieManager.clearAll(true).then(() => {
             this.setState({renderWebView: true});
         });
     };
@@ -163,7 +162,6 @@ class SSO extends PureComponent {
 
         if (parsed.host.includes('.onelogin.com')) {
             nextState.jsCode = oneLoginFormScalingJS;
-            nextState.scalePagesToFit = true;
         } else if (serverUrl.host === parsed.host) {
             nextState.jsCode = postMessageJS;
         } else {
@@ -177,9 +175,8 @@ class SSO extends PureComponent {
 
     onLoadEnd = (event) => {
         const url = event.nativeEvent.url;
-
         if (url.includes(this.completedUrl)) {
-            CookieManager.get(urlParse(url).origin).then((res) => {
+            CookieManager.get(urlParse(url).origin, true).then((res) => {
                 const token = res.MMAUTHTOKEN;
 
                 if (token) {
@@ -212,7 +209,7 @@ class SSO extends PureComponent {
 
     render() {
         const {theme} = this.props;
-        const {error, renderWebView, jsCode, scalePagesToFit} = this.state;
+        const {error, renderWebView, jsCode} = this.state;
         const style = getStyleSheet(theme);
 
         let content;
@@ -230,14 +227,14 @@ class SSO extends PureComponent {
                     source={{uri: this.loginUrl, headers: HEADERS}}
                     javaScriptEnabledAndroid={true}
                     automaticallyAdjustContentInsets={false}
-                    scalesPageToFit={scalePagesToFit}
                     startInLoadingState={true}
                     onNavigationStateChange={this.onNavigationStateChange}
                     onShouldStartLoadWithRequest={() => true}
                     renderLoading={this.renderLoading}
-                    onMessage={jsCode ? this.onMessage : null}
+                    onMessage={this.onMessage}
                     injectedJavaScript={jsCode}
                     onLoadEnd={this.onLoadEnd}
+                    useWebKit={true}
                 />
             );
         }

app/screens/user_profile/__snapshots__/user_profile.test.js.snap

@@ -79,10 +79,7 @@ ShallowWrapper {
               statusSize={40}
               userId="4hzdnk6mg7gepe7yze6m3domnc"
             />
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <Component
               style={
                 Object {
                   "color": "#aaa",
@@ -92,7 +89,7 @@ ShallowWrapper {
               }
             >
               @undefined
-            </Text>
+            </Component>
           </Component>
           <Component
             style={
@@ -103,10 +100,7 @@ ShallowWrapper {
             }
           >
             <Component>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": undefined,
@@ -118,11 +112,8 @@ ShallowWrapper {
                 }
               >
                 NICKNAME
-              </Text>
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              </Component>
+              <Component
                 style={
                   Object {
                     "color": "#aaa",
@@ -131,7 +122,7 @@ ShallowWrapper {
                 }
               >
                 nick
-              </Text>
+              </Component>
             </Component>
           </Component>
           <userProfileRow
@@ -190,10 +181,7 @@ ShallowWrapper {
                 statusSize={40}
                 userId="4hzdnk6mg7gepe7yze6m3domnc"
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": "#aaa",
@@ -203,7 +191,7 @@ ShallowWrapper {
                 }
               >
                 @undefined
-              </Text>
+              </Component>
             </Component>,
             <Component
               style={
@@ -214,10 +202,7 @@ ShallowWrapper {
               }
             >
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -229,11 +214,8 @@ ShallowWrapper {
                   }
                 >
                   NICKNAME
-                </Text>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                </Component>
+                <Component
                   style={
                     Object {
                       "color": "#aaa",
@@ -242,7 +224,7 @@ ShallowWrapper {
                   }
                 >
                   nick
-                </Text>
+                </Component>
               </Component>
             </Component>,
             <userProfileRow
@@ -285,10 +267,7 @@ ShallowWrapper {
                   userId="4hzdnk6mg7gepe7yze6m3domnc"
                 />,
                 null,
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": "#aaa",
@@ -298,7 +277,7 @@ ShallowWrapper {
                   }
                 >
                   @undefined
-                </Text>,
+                </Component>,
               ],
               "style": Object {
                 "alignItems": "center",
@@ -328,10 +307,7 @@ ShallowWrapper {
                 "key": undefined,
                 "nodeType": "class",
                 "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
                   "children": "@undefined",
-                  "ellipsizeMode": "tail",
                   "style": Object {
                     "color": "#aaa",
                     "fontSize": 15,
@@ -355,10 +331,7 @@ ShallowWrapper {
                 null,
                 false,
                 <Component>
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": undefined,
@@ -370,11 +343,8 @@ ShallowWrapper {
                     }
                   >
                     NICKNAME
-                  </Text>
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  </Component>
+                  <Component
                     style={
                       Object {
                         "color": "#aaa",
@@ -383,7 +353,7 @@ ShallowWrapper {
                     }
                   >
                     nick
-                  </Text>
+                  </Component>
                 </Component>,
                 null,
               ],
@@ -403,10 +373,7 @@ ShallowWrapper {
                 "nodeType": "class",
                 "props": Object {
                   "children": Array [
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    <Component
                       style={
                         Object {
                           "color": undefined,
@@ -418,11 +385,8 @@ ShallowWrapper {
                       }
                     >
                       NICKNAME
-                    </Text>,
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    </Component>,
+                    <Component
                       style={
                         Object {
                           "color": "#aaa",
@@ -431,7 +395,7 @@ ShallowWrapper {
                       }
                     >
                       nick
-                    </Text>,
+                    </Component>,
                   ],
                 },
                 "ref": null,
@@ -441,10 +405,7 @@ ShallowWrapper {
                     "key": undefined,
                     "nodeType": "class",
                     "props": Object {
-                      "accessible": true,
-                      "allowFontScaling": true,
                       "children": "NICKNAME",
-                      "ellipsizeMode": "tail",
                       "style": Object {
                         "color": undefined,
                         "fontSize": 13,
@@ -462,10 +423,7 @@ ShallowWrapper {
                     "key": undefined,
                     "nodeType": "class",
                     "props": Object {
-                      "accessible": true,
-                      "allowFontScaling": true,
                       "children": "nick",
-                      "ellipsizeMode": "tail",
                       "style": Object {
                         "color": "#aaa",
                         "fontSize": 15,
@@ -544,10 +502,7 @@ ShallowWrapper {
                 statusSize={40}
                 userId="4hzdnk6mg7gepe7yze6m3domnc"
               />
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <Component
                 style={
                   Object {
                     "color": "#aaa",
@@ -557,7 +512,7 @@ ShallowWrapper {
                 }
               >
                 @undefined
-              </Text>
+              </Component>
             </Component>
             <Component
               style={
@@ -568,10 +523,7 @@ ShallowWrapper {
               }
             >
               <Component>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": undefined,
@@ -583,11 +535,8 @@ ShallowWrapper {
                   }
                 >
                   NICKNAME
-                </Text>
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                </Component>
+                <Component
                   style={
                     Object {
                       "color": "#aaa",
@@ -596,7 +545,7 @@ ShallowWrapper {
                   }
                 >
                   nick
-                </Text>
+                </Component>
               </Component>
             </Component>
             <userProfileRow
@@ -655,10 +604,7 @@ ShallowWrapper {
                   statusSize={40}
                   userId="4hzdnk6mg7gepe7yze6m3domnc"
                 />
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
+                <Component
                   style={
                     Object {
                       "color": "#aaa",
@@ -668,7 +614,7 @@ ShallowWrapper {
                   }
                 >
                   @undefined
-                </Text>
+                </Component>
               </Component>,
               <Component
                 style={
@@ -679,10 +625,7 @@ ShallowWrapper {
                 }
               >
                 <Component>
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": undefined,
@@ -694,11 +637,8 @@ ShallowWrapper {
                     }
                   >
                     NICKNAME
-                  </Text>
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  </Component>
+                  <Component
                     style={
                       Object {
                         "color": "#aaa",
@@ -707,7 +647,7 @@ ShallowWrapper {
                     }
                   >
                     nick
-                  </Text>
+                  </Component>
                 </Component>
               </Component>,
               <userProfileRow
@@ -750,10 +690,7 @@ ShallowWrapper {
                     userId="4hzdnk6mg7gepe7yze6m3domnc"
                   />,
                   null,
-                  <Text
-                    accessible={true}
-                    allowFontScaling={true}
-                    ellipsizeMode="tail"
+                  <Component
                     style={
                       Object {
                         "color": "#aaa",
@@ -763,7 +700,7 @@ ShallowWrapper {
                     }
                   >
                     @undefined
-                  </Text>,
+                  </Component>,
                 ],
                 "style": Object {
                   "alignItems": "center",
@@ -793,10 +730,7 @@ ShallowWrapper {
                   "key": undefined,
                   "nodeType": "class",
                   "props": Object {
-                    "accessible": true,
-                    "allowFontScaling": true,
                     "children": "@undefined",
-                    "ellipsizeMode": "tail",
                     "style": Object {
                       "color": "#aaa",
                       "fontSize": 15,
@@ -820,10 +754,7 @@ ShallowWrapper {
                   null,
                   false,
                   <Component>
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    <Component
                       style={
                         Object {
                           "color": undefined,
@@ -835,11 +766,8 @@ ShallowWrapper {
                       }
                     >
                       NICKNAME
-                    </Text>
-                    <Text
-                      accessible={true}
-                      allowFontScaling={true}
-                      ellipsizeMode="tail"
+                    </Component>
+                    <Component
                       style={
                         Object {
                           "color": "#aaa",
@@ -848,7 +776,7 @@ ShallowWrapper {
                       }
                     >
                       nick
-                    </Text>
+                    </Component>
                   </Component>,
                   null,
                 ],
@@ -868,10 +796,7 @@ ShallowWrapper {
                   "nodeType": "class",
                   "props": Object {
                     "children": Array [
-                      <Text
-                        accessible={true}
-                        allowFontScaling={true}
-                        ellipsizeMode="tail"
+                      <Component
                         style={
                           Object {
                             "color": undefined,
@@ -883,11 +808,8 @@ ShallowWrapper {
                         }
                       >
                         NICKNAME
-                      </Text>,
-                      <Text
-                        accessible={true}
-                        allowFontScaling={true}
-                        ellipsizeMode="tail"
+                      </Component>,
+                      <Component
                         style={
                           Object {
                             "color": "#aaa",
@@ -896,7 +818,7 @@ ShallowWrapper {
                         }
                       >
                         nick
-                      </Text>,
+                      </Component>,
                     ],
                   },
                   "ref": null,
@@ -906,10 +828,7 @@ ShallowWrapper {
                       "key": undefined,
                       "nodeType": "class",
                       "props": Object {
-                        "accessible": true,
-                        "allowFontScaling": true,
                         "children": "NICKNAME",
-                        "ellipsizeMode": "tail",
                         "style": Object {
                           "color": undefined,
                           "fontSize": 13,
@@ -927,10 +846,7 @@ ShallowWrapper {
                       "key": undefined,
                       "nodeType": "class",
                       "props": Object {
-                        "accessible": true,
-                        "allowFontScaling": true,
                         "children": "nick",
-                        "ellipsizeMode": "tail",
                         "style": Object {
                           "color": "#aaa",
                           "fontSize": 15,

babel.config.js

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+module.exports = {
+    presets: ['module:metro-react-native-babel-preset'],
+    env: {
+        production: {
+            plugins: ['transform-remove-console'],
+        },
+    },
+    plugins: [
+        '@babel/plugin-transform-runtime',
+        ['module-resolver', {
+            root: ['.'],
+            alias: {
+                assets: './dist/assets',
+            },
+        }],
+    ],
+    exclude: ['**/*.png', '**/*.jpg', '**/*.gif'],
+};

ios/react-native-xcode.sh

@@ -169,6 +169,7 @@ $NODE_BINARY "$CLI_PATH" bundle \
   --reset-cache \
   --bundle-output "$BUNDLE_FILE" \
   --assets-dest "$DEST"
+  --max-workers=8
 
 if [[ $DEV != true && ! -f "$BUNDLE_FILE" ]]; then
   echo "error: File $BUNDLE_FILE does not exist. This must be a bug with" >&2

package.json

@@ -7,6 +7,8 @@
   "license": "Apache 2.0",
   "private": true,
   "dependencies": {
+    "@babel/polyfill": "7.0.0",
+    "@babel/runtime": "7.0.0",
     "analytics-react-native": "1.2.0",
     "commonmark": "github:mattermost/commonmark.js#971456e6d3f07b14effac73718d1de768586876a",
     "commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#b560513b93357ee5fd33489fe311bc65d4658870",
@@ -20,14 +22,14 @@
     "moment-timezone": "0.5.21",
     "prop-types": "15.6.2",
     "react": "16.5.1",
-    "react-intl": "2.5.0",
-    "react-native": "github:enahum/react-native#mm",
+    "react-intl": "2.6.0",
+    "react-native": "0.57.0",
     "react-native-animatable": "1.3.0",
     "react-native-bottom-sheet": "1.0.3",
     "react-native-button": "2.3.0",
     "react-native-calendars": "github:enahum/react-native-calendars#b96954bf85126222b311b638fe458a8194f25bed",
     "react-native-circular-progress": "1.0.1",
-    "react-native-cookies": "3.3.0",
+    "react-native-cookies": "github:joeferraro/react-native-cookies#f11374745deba9f18f7b8a9bb4b0b2573026f522",
     "react-native-device-info": "github:enahum/react-native-device-info#3b1a676801215444b1758aa76b6f0fe0fc449650",
     "react-native-doc-viewer": "2.7.8",
     "react-native-document-picker": "2.1.0",
@@ -48,13 +50,13 @@
     "react-native-sentry": "0.38.3",
     "react-native-slider": "0.11.0",
     "react-native-status-bar-size": "0.3.3",
-    "react-native-svg": "6.5.2",
+    "react-native-svg": "7.0.2",
     "react-native-tableview": "2.3.1",
     "react-native-tooltip": "5.2.0",
     "react-native-vector-icons": "5.0.0",
     "react-native-video": "3.2.1",
     "react-native-youtube": "github:enahum/react-native-youtube#3f395b620ae4e05a3f1c6bdeef3a1158e78daadc",
-    "react-navigation": "2.14.0",
+    "react-navigation": "2.14.2",
     "react-redux": "5.0.7",
     "redux": "4.0.0",
     "redux-batched-actions": "0.4.0",
@@ -70,38 +72,36 @@
     "url-parse": "1.4.3"
   },
   "devDependencies": {
-    "babel-cli": "6.26.0",
+    "@babel/cli": "7.1.0",
+    "@babel/core": "7.1.0",
+    "@babel/plugin-transform-runtime": "7.1.0",
+    "@babel/preset-env": "7.1.0",
+    "@babel/register": "7.0.0",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-plugin-module-resolver": "3.1.1",
     "babel-plugin-transform-remove-console": "6.9.4",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-latest": "6.24.1",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-react-native": "4.0.1",
-    "babel-preset-stage-0": "6.24.1",
-    "babel-register": "6.26.0",
     "deep-freeze": "0.0.1",
     "enzyme": "3.6.0",
     "enzyme-adapter-react-16": "1.5.0",
     "enzyme-to-json": "3.3.4",
-    "eslint": "5.5.0",
+    "eslint": "5.6.0",
     "eslint-plugin-header": "2.0.0",
     "eslint-plugin-jest": "21.22.0",
     "eslint-plugin-react": "7.11.1",
     "jest": "23.6.0",
     "jest-cli": "23.6.0",
     "jsdom-global": "3.0.2",
+    "metro-react-native-babel-preset": "0.45.4",
     "nyc": "13.0.1",
     "react-dom": "16.5.1",
     "redux-mock-store": "1.5.3",
     "remote-redux-devtools": "0.5.13",
-    "remotedev-rn-debugger": "0.8.3",
     "socketcluster": "14.1.1",
     "underscore": "1.9.1"
   },
   "scripts": {
-    "start": "node ./node_modules/react-native/local-cli/cli.js start --config ../../../../packager/config.js",
+    "start": "node ./node_modules/react-native/local-cli/cli.js start --config ../../../../packager-config.js --max-workers=8",
     "check": "eslint --ignore-path .gitignore --ignore-pattern node_modules --quiet .",
     "fix": "eslint --ignore-path .gitignore --ignore-pattern node_modules --quiet . --fix",
     "postinstall": "make post-install",

packager-config.js

@@ -0,0 +1,48 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+/* eslint-disable no-console */
+const modulePaths = require('./packager/modulePaths');
+const resolve = require('path').resolve;
+const fs = require('fs');
+
+const platformRegex = /\.(android\.js|ios\.js)/g;
+const modulesRegex = /\/(node_modules)/;
+
+// This script will let the react native packager what modules to include
+// in the main bundle and what modules to blacklist from the inline requires
+// this modules are taken from the modulePaths.js file
+
+const config = {
+    transformer: {
+        getTransformOptions: (entryFile, {platform}) => {
+            console.log('BUILDING MODULES FOR', platform);
+            const moduleMap = {};
+            modulePaths.forEach((path) => {
+                let realPath = path;
+                if (platform && platformRegex.test(realPath)) {
+                    realPath = path.replace(platformRegex, `.${platform}.js`);
+                }
+
+                let fsFile = realPath;
+                if (path.match(modulesRegex).length > 1) {
+                    fsFile = path.replace(modulesRegex, '');
+                }
+
+                if (fs.existsSync(fsFile)) {
+                    moduleMap[resolve(realPath)] = true;
+                }
+            });
+            return {
+                preloadedModules: moduleMap,
+                transform: {
+                    inlineRequires: {
+                        blacklist: moduleMap,
+                    },
+                },
+            };
+        },
+    },
+};
+
+module.exports = config;

packager/config.js

@@ -1,46 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-/* eslint-disable no-console */
-const modulePaths = require('./modulePaths');
-const resolve = require('path').resolve;
-const fs = require('fs');
-
-const platformRegex = /\.(android\.js|ios\.js)/g;
-const modulesRegex = /\/(node_modules)/;
-
-// This script will let the react native packager what modules to include
-// in the main bundle and what modules to blacklist from the inline requires
-// this modules are taken from the modulePaths.js file
-
-const config = {
-    getTransformOptions: (entryFile, {platform}) => {
-        console.log('BUILDING MODULES FOR', platform);
-        const moduleMap = {};
-        modulePaths.forEach((path) => {
-            let realPath = path;
-            if (platform && platformRegex.test(realPath)) {
-                realPath = path.replace(platformRegex, `.${platform}.js`);
-            }
-
-            let fsFile = realPath;
-            if (path.match(modulesRegex).length > 1) {
-                fsFile = path.replace(modulesRegex, '');
-            }
-
-            if (fs.existsSync(fsFile)) {
-                moduleMap[resolve(realPath)] = true;
-            }
-        });
-        return {
-            preloadedModules: moduleMap,
-            transform: {
-                inlineRequires: {
-                    blacklist: moduleMap,
-                },
-            },
-        };
-    },
-};
-
-module.exports = config;

rn-cli.config.js

@@ -1,18 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-const path = require('path');
-const blacklist = require('metro/src/blacklist');
-
-const config = {
-    getBlacklistRE() {
-        return blacklist([/react-native\/local-cli\/core\/__fixtures__.*/]);
-    },
-    getProjectRoots() {
-        return [
-            path.resolve(__dirname, '.'),
-        ];
-    },
-};
-
-module.exports = config;

share_extension/android/extension_post/extension_post.js

@@ -13,6 +13,7 @@ import {
     PermissionsAndroid,
     ScrollView,
     Text,
+    TextInput,
     View,
 } from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
@@ -23,7 +24,6 @@ import RNFetchBlob from 'rn-fetch-blob';
 import {Preferences} from 'mattermost-redux/constants';
 import {getFormattedFileSize, lookupMimeType} from 'mattermost-redux/utils/file_utils';
 
-import QuickTextInput from 'app/components/quick_text_input';
 import PaperPlane from 'app/components/paper_plane';
 import mattermostManaged from 'app/mattermost_managed';
 import {getExtensionFromMime} from 'app/utils/file';
@@ -352,7 +352,7 @@ export default class ExtensionPost extends PureComponent {
                 contentContainerStyle={styles.scrollView}
                 style={styles.flex}
             >
-                <QuickTextInput
+                <TextInput
                     ref={this.getInputRef}
                     autoCapitalize='sentences'
                     maxLength={MAX_MESSAGE_LENGTH}

share_extension/android/navigation.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {StackNavigator as stackNavigator} from 'react-navigation';
+import {createStackNavigator} from 'react-navigation';
 
 import {Preferences} from 'mattermost-redux/constants';
 
@@ -10,7 +10,7 @@ import ExtensionPost from './extension_post';
 import ExtensionTeams from './extension_teams';
 
 const theme = Preferences.THEMES.default;
-const Navigation = stackNavigator({
+const Navigation = createStackNavigator({
     Post: {
         screen: ExtensionPost,
     },

share_extension/ios/extension_post.js

@@ -12,6 +12,7 @@ import {
     NativeModules,
     ScrollView,
     Text,
+    TextInput,
     TouchableHighlight,
     View,
 } from 'react-native';
@@ -26,7 +27,6 @@ import {getChannel, getDefaultChannel} from 'mattermost-redux/selectors/entities
 import {getFormattedFileSize, lookupMimeType} from 'mattermost-redux/utils/file_utils';
 import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
 
-import QuickTextInput from 'app/components/quick_text_input';
 import mattermostBucket from 'app/mattermost_bucket';
 import {generateId, getAllowedServerMaxFileSize} from 'app/utils/file';
 import {preventDoubleTap} from 'app/utils/tap';
@@ -363,7 +363,7 @@ export default class ExtensionPost extends PureComponent {
                     contentContainerStyle={styles.scrollView}
                     style={styles.flex}
                 >
-                    <QuickTextInput
+                    <TextInput
                         ref={this.getInputRef}
                         maxLength={MAX_MESSAGE_LENGTH}
                         multiline={true}