reset version number to 1.56.0 and build to 436

Bump build to 436 (#6746 ) (#6747 )
* Revert "Downgrade mmkv and bump to 435 (#6742)" This reverts commit 66b469bb31. * Revert "Bump Version to 1.56.0 and build to 431 (#6723)" This reverts commit fdee027b4a. * Revert "[V1] update deps (#6666)" This reverts commit 8137241f12. * bump build to 436 * update snapshots (cherry picked from commit db86bbc42b) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
2022-11-08 13:43:12 +02:00 · 2022-11-08 10:28:09 +02:00 · 2022-11-07 13:10:46 +02:00 · 2022-11-07 11:09:32 +02:00 · 2022-11-05 23:40:36 +02:00 · 2022-11-05 23:21:00 +02:00
382 changed files with 18469 additions and 20807 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,13 +1,13 @@
 version: 2.1
 orbs:
  owasp: entur/owasp@0.0.10
-  node: circleci/node@5.0.3
+  node: circleci/node@4.5.1

 executors:
  android:
    parameters:
      resource_class:
-        default: xlarge
+        default: large
        type: string
    environment:
      NODE_OPTIONS: --max_old_space_size=12000
@@ -93,7 +93,8 @@ commands:
    description: "Get JavaScript dependencies"
    steps:
      - node/install:
-          node-version: '16.15.0'
+          node-version: '16.2.0'
+          install-npm: false
      - restore_cache:
          name: Restore npm cache
          key: v2-npm-{{ checksum "package.json" }}-{{ arch }}
@@ -524,4 +525,4 @@ workflows:
            tags:
              only: /^v(\d+\.)(\d+\.)(\d+)(.*)?$/
            branches:
-              only: unsigned
+              only: unsigned
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,13 +1,13 @@
 {
  "extends": [
-    "./eslint/eslint-mattermost",
-    "./eslint/eslint-react",
+    "plugin:mattermost/react",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
+    "mattermost",
    "import"
  ],
  "settings": {
--- a/.flowconfig
+++ b/.flowconfig
@@ -11,8 +11,6 @@ node_modules/react-native/Libraries/polyfills/.*
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js

-.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$
-
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*

@@ -65,4 +63,4 @@ untyped-import
 untyped-type-import

 [version]
-^0.176.3
+^0.162.0
--- a/.gitignore
+++ b/.gitignore
@@ -32,10 +32,8 @@ DerivedData
 *.apk
 *.aab
 *.xcuserstate
-ios/.xcode.env.local
 project.xcworkspace
 ios/Pods
-/vendor/bundle/
 .podinstall

 # Android/IntelliJ
@@ -44,6 +42,8 @@ ios/Pods
 .gradle
 local.properties
 *.iml
+*.hprof
+.cxx/
 android/app/bin
 android/app/build
 android/build
@@ -81,11 +81,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/screenshots
-**/fastlane/test_output
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
 fastlane/.env
+fastlane/report.xml

 # Sentry
 android/sentry.properties
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This `master` branch is mostly in maintenance mode while we're working to gettin
 # Mattermost Mobile App
 [![Mattermost](https://user-images.githubusercontent.com/7205829/136108314-75cd2e1f-4147-4cfa-a16c-9b3b0313ea25.png)](https://mattermost.com)

- **Minimum Server versions:** Current ESR version (6.3.0)
+- **Minimum Server versions:** Current ESR version (7.1.0)
 - **Supported iOS versions:** 12.1+
 - **Supported Android versions:** 7.0+

--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -120,12 +120,9 @@ def jscFlavor = 'org.webkit:android-jsc-intl:+'
 def enableHermes = project.ext.react.get("enableHermes", false);

 /**
- * Architectures to build native code for.
+ * Architectures to build native code for in debug.
 */
-def reactNativeArchitectures() {
-    def value = project.getProperties().get("reactNativeArchitectures")
-    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
+def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")

 android {
    compileSdkVersion rootProject.ext.compileSdkVersion
@@ -134,83 +131,11 @@ android {
        applicationId "com.mattermost.rnbeta"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 423
-        versionName "1.55.1"
+        versionCode 436
+        versionName "1.56.0"
        multiDexEnabled = true
        testBuildType System.getProperty('testBuildType', 'debug')
        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
-        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
-
-        if (isNewArchitectureEnabled()) {
-            // We configure the NDK build only if you decide to opt-in for the New Architecture.
-            externalNativeBuild {
-                ndkBuild {
-                    arguments "APP_PLATFORM=android-21",
-                        "APP_STL=c++_shared",
-                        "NDK_TOOLCHAIN_VERSION=clang",
-                        "GENERATED_SRC_DIR=$buildDir/generated/source",
-                        "PROJECT_BUILD_DIR=$buildDir",
-                        "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
-                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
-                        "NODE_MODULES_DIR=$rootDir/../node_modules"
-                    cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
-                    cppFlags "-std=c++17"
-                    // Make sure this target name is the same you specify inside the
-                    // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
-                    targets "rndiffapp_appmodules"
-                    // Fix for windows limit on number of character in file paths and in command lines
-                    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-                        arguments "NDK_APP_SHORT_COMMANDS=true"
-                    }
-                }
-            }
-            if (!enableSeparateBuildPerCPUArchitecture) {
-                ndk {
-                    abiFilters (*reactNativeArchitectures())
-                }
-            }
-        }
-    }
-
-    if (isNewArchitectureEnabled()) {
-        // We configure the NDK build only if you decide to opt-in for the New Architecture.
-        externalNativeBuild {
-            ndkBuild {
-                path "$projectDir/src/main/jni/Android.mk"
-            }
-        }
-        def reactAndroidProjectDir = project(':ReactAndroid').projectDir
-        def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) {
-            dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck")
-            from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
-            into("$buildDir/react-ndk/exported")
-        }
-        def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) {
-            dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck")
-            from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib")
-            into("$buildDir/react-ndk/exported")
-        }
-        afterEvaluate {
-            // If you wish to add a custom TurboModule or component locally,
-            // you should uncomment this line.
-            // preBuild.dependsOn("generateCodegenArtifactsFromSchema")
-            preDebugBuild.dependsOn(packageReactNdkDebugLibs)
-            preReleaseBuild.dependsOn(packageReactNdkReleaseLibs)
-
-            // Due to a bug inside AGP, we have to explicitly set a dependency
-            // between configureNdkBuild* tasks and the preBuild tasks.
-            // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732
-            configureNdkBuildRelease.dependsOn(preReleaseBuild)
-            configureNdkBuildDebug.dependsOn(preDebugBuild)
-            reactNativeArchitectures().each { architecture ->
-                tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure {
-                    dependsOn("preDebugBuild")
-                }
-                tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure {
-                    dependsOn("preReleaseBuild")
-                }
-            }
-        }
    }
    signingConfigs {
        release {
@@ -227,25 +152,22 @@ android {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk enableSeparateBuildPerCPUArchitecture  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
-        def useReleaseKey = project.hasProperty('MATTERMOST_RELEASE_STORE_FILE')
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            if (useReleaseKey) {
-                signingConfig signingConfigs.release
-            } else {
-                signingConfig signingConfigs.debug
-            }
+            signingConfig signingConfigs.release
        }
        debug {
-            if (useReleaseKey) {
-                signingConfig signingConfigs.release
-            } else {
-                signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            if (nativeArchitectures) {
+                ndk {
+                    abiFilters nativeArchitectures.split(',')
+                }
            }
        }
        unsigned.initWith(buildTypes.release)
@@ -290,6 +212,25 @@ repositories {
    }
 }

+configurations.all {
+    resolutionStrategy {
+        eachDependency { DependencyResolveDetails details ->
+            if (details.requested.name == 'play-services-base') {
+                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
+            }
+            if (details.requested.name == 'play-services-tasks') {
+                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
+            }
+            if (details.requested.name == 'play-services-stats') {
+                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
+            }
+            if (details.requested.name == 'play-services-basement') {
+                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
+            }
+        }
+    }
+}
+
 dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])

@@ -309,10 +250,10 @@ dependencies {


    if (enableHermes) {
-        //noinspection GradleDynamicVersion
-        implementation("com.facebook.react:hermes-engine:+") { // From node_modules
-            exclude group:'com.facebook.fbjni'
-        }
+        def hermesPath = "../../node_modules/hermes-engine/android/";
+        debugImplementation files(hermesPath + "hermes-debug.aar")
+        releaseImplementation files(hermesPath + "hermes-release.aar")
+        unsignedImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
@@ -334,39 +275,6 @@ dependencies {
    androidTestImplementation('com.wix:detox:+')
 }

-configurations.all {
-    if (isNewArchitectureEnabled()) {
-        // If new architecture is enabled, we let you build RN from source
-        // Otherwise we fallback to a prebuilt .aar bundled in the NPM package.
-        // This will be applied to all the imported transtitive dependency.
-        resolutionStrategy.dependencySubstitution {
-            substitute(module("com.facebook.react:react-native"))
-                    .using(project(":ReactAndroid"))
-                    .because("On New Architecture we're building React Native from source")
-            substitute(module("com.facebook.react:hermes-engine"))
-                    .using(project(":ReactAndroid:hermes-engine"))
-                    .because("On New Architecture we're building Hermes from source")
-        }
-    }
-
-    resolutionStrategy {
-        eachDependency { DependencyResolveDetails details ->
-            if (details.requested.name == 'play-services-base') {
-                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
-            }
-            if (details.requested.name == 'play-services-tasks') {
-                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
-            }
-            if (details.requested.name == 'play-services-stats') {
-                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
-            }
-            if (details.requested.name == 'play-services-basement') {
-                details.useTarget group: details.requested.group, name: details.requested.name, version: '15.0.1'
-            }
-        }
-    }
-}
-
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
@@ -376,11 +284,3 @@ task copyDownloadableDepsToLibs(type: Copy) {

 apply plugin: 'com.google.gms.google-services'
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-
-def isNewArchitectureEnabled() {
-    // To opt-in for the New Architecture, you can either:
-    // - Set `newArchEnabled` to true inside the `gradle.properties` file
-    // - Invoke gradle with `-newArchEnabled=true`
-    // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
-    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
-}
--- a/android/app/src/debug/AndroidManifest.xml
+++ b/android/app/src/debug/AndroidManifest.xml
@@ -10,4 +10,4 @@
        tools:ignore="GoogleAppIndexingWarning">
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
    </application>
-</manifest>
+</manifest>
--- a/android/app/src/debug/java/com/rn/ReactNativeFlipper.java
+++ b/android/app/src/debug/java/com/rn/ReactNativeFlipper.java
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
 * directory of this source tree.
@@ -19,7 +19,6 @@ import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
 import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
 import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
 import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceEventListener;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
@@ -48,7 +47,7 @@ public class ReactNativeFlipper {
      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
      if (reactContext == null) {
        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceEventListener() {
+            new ReactInstanceManager.ReactInstanceEventListener() {
              @Override
              public void onReactContextInitialized(ReactContext reactContext) {
                reactInstanceManager.removeReactInstanceEventListener(this);
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -95,4 +95,4 @@
            <data android:mimeType="*/*" />
        </intent>
    </queries>
-</manifest>
+</manifest>
--- a/android/app/src/main/java/com/mattermost/newarchitecture/MainApplicationReactNativeHost.java
+++ b/android/app/src/main/java/com/mattermost/newarchitecture/MainApplicationReactNativeHost.java
@@ -1,116 +0,0 @@
-package com.mattermost.newarchitecture;
-
-import android.app.Application;
-import androidx.annotation.NonNull;
-import com.facebook.react.PackageList;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
-import com.facebook.react.bridge.JSIModulePackage;
-import com.facebook.react.bridge.JSIModuleProvider;
-import com.facebook.react.bridge.JSIModuleSpec;
-import com.facebook.react.bridge.JSIModuleType;
-import com.facebook.react.bridge.JavaScriptContextHolder;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.UIManager;
-import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.react.fabric.CoreComponentsRegistry;
-import com.facebook.react.fabric.FabricJSIModuleProvider;
-import com.facebook.react.fabric.ReactNativeConfig;
-import com.facebook.react.uimanager.ViewManagerRegistry;
-import com.mattermost.rnbeta.BuildConfig;
-import com.mattermost.newarchitecture.components.MainComponentsRegistry;
-import com.mattermost.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
- * TurboModule delegates and the Fabric Renderer.
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-public class MainApplicationReactNativeHost extends ReactNativeHost {
-  public MainApplicationReactNativeHost(Application application) {
-    super(application);
-  }
-
-  @Override
-  public boolean getUseDeveloperSupport() {
-    return BuildConfig.DEBUG;
-  }
-
-  @Override
-  protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    //     packages.add(new MyReactNativePackage());
-    // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
-    //     packages.add(new TurboReactPackage() { ... });
-    // If you have custom Fabric Components, their ViewManagers should also be loaded here
-    // inside a ReactPackage.
-    return packages;
-  }
-
-  @Override
-  protected String getJSMainModuleName() {
-    return "index";
-  }
-
-  @NonNull
-  @Override
-  protected ReactPackageTurboModuleManagerDelegate.Builder
-      getReactPackageTurboModuleManagerDelegateBuilder() {
-    // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
-    // for the new architecture and to use TurboModules correctly.
-    return new MainApplicationTurboModuleManagerDelegate.Builder();
-  }
-
-  @Override
-  protected JSIModulePackage getJSIModulePackage() {
-    return new JSIModulePackage() {
-      @Override
-      public List<JSIModuleSpec> getJSIModules(
-          final ReactApplicationContext reactApplicationContext,
-          final JavaScriptContextHolder jsContext) {
-        final List<JSIModuleSpec> specs = new ArrayList<>();
-
-        // Here we provide a new JSIModuleSpec that will be responsible of providing the
-        // custom Fabric Components.
-        specs.add(
-            new JSIModuleSpec() {
-              @Override
-              public JSIModuleType getJSIModuleType() {
-                return JSIModuleType.UIManager;
-              }
-
-              @Override
-              public JSIModuleProvider<UIManager> getJSIModuleProvider() {
-                final ComponentFactory componentFactory = new ComponentFactory();
-                CoreComponentsRegistry.register(componentFactory);
-
-                // Here we register a Components Registry.
-                // The one that is generated with the template contains no components
-                // and just provides you the one from React Native core.
-                MainComponentsRegistry.register(componentFactory);
-
-                final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
-
-                ViewManagerRegistry viewManagerRegistry =
-                    new ViewManagerRegistry(
-                        reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
-
-                return new FabricJSIModuleProvider(
-                    reactApplicationContext,
-                    componentFactory,
-                    ReactNativeConfig.DEFAULT_CONFIG,
-                    viewManagerRegistry);
-              }
-            });
-        return specs;
-      }
-    };
-  }
-}
--- a/android/app/src/main/java/com/mattermost/newarchitecture/components/MainComponentsRegistry.java
+++ b/android/app/src/main/java/com/mattermost/newarchitecture/components/MainComponentsRegistry.java
@@ -1,36 +0,0 @@
-package com.mattermost.newarchitecture.components;
-
-import com.facebook.jni.HybridData;
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.soloader.SoLoader;
-
-/**
- * Class responsible to load the custom Fabric Components. This class has native methods and needs a
- * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
- * folder for you).
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-@DoNotStrip
-public class MainComponentsRegistry {
-  static {
-    SoLoader.loadLibrary("fabricjni");
-  }
-
-  @DoNotStrip private final HybridData mHybridData;
-
-  @DoNotStrip
-  private native HybridData initHybrid(ComponentFactory componentFactory);
-
-  @DoNotStrip
-  private MainComponentsRegistry(ComponentFactory componentFactory) {
-    mHybridData = initHybrid(componentFactory);
-  }
-
-  @DoNotStrip
-  public static MainComponentsRegistry register(ComponentFactory componentFactory) {
-    return new MainComponentsRegistry(componentFactory);
-  }
-}
--- a/android/app/src/main/java/com/mattermost/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
+++ b/android/app/src/main/java/com/mattermost/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
@@ -1,48 +0,0 @@
-package com.mattermost.newarchitecture.modules;
-
-import com.facebook.jni.HybridData;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.soloader.SoLoader;
-import java.util.List;
-
-/**
- * Class responsible to load the TurboModules. This class has native methods and needs a
- * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
- * folder for you).
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-public class MainApplicationTurboModuleManagerDelegate
-    extends ReactPackageTurboModuleManagerDelegate {
-
-  private static volatile boolean sIsSoLibraryLoaded;
-
-  protected MainApplicationTurboModuleManagerDelegate(
-      ReactApplicationContext reactApplicationContext, List<ReactPackage> packages) {
-    super(reactApplicationContext, packages);
-  }
-
-  protected native HybridData initHybrid();
-
-  native boolean canCreateTurboModule(String moduleName);
-
-  public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
-    protected MainApplicationTurboModuleManagerDelegate build(
-        ReactApplicationContext context, List<ReactPackage> packages) {
-      return new MainApplicationTurboModuleManagerDelegate(context, packages);
-    }
-  }
-
-  @Override
-  protected synchronized void maybeLoadOtherSoLibraries() {
-    if (!sIsSoLibraryLoaded) {
-      // If you change the name of your application .so file in the Android.mk file,
-      // make sure you update the name here as well.
-      SoLoader.loadLibrary("rndiffapp_appmodules");
-      sIsSoLibraryLoaded = true;
-    }
-  }
-}
--- a/android/app/src/main/java/com/mattermost/rnbeta/MainActivity.java
+++ b/android/app/src/main/java/com/mattermost/rnbeta/MainActivity.java
@@ -1,44 +1,18 @@
 package com.mattermost.rnbeta;

 import android.os.Bundle;
-import androidx.annotation.Nullable;

+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 import android.view.KeyEvent;
 import android.content.res.Configuration;

-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactRootView;
 import com.reactnativenavigation.NavigationActivity;
 import com.github.emilioicai.hwkeyboardevent.HWKeyboardEventModule;

 public class MainActivity extends NavigationActivity {
    private boolean HWKeyboardConnected = false;

-    public static class MainActivityDelegate extends ReactActivityDelegate {
-        public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {
-            super(activity, mainComponentName);
-        }
-
-        @Override
-        protected ReactRootView createRootView() {
-            ReactRootView reactRootView = new ReactRootView(getContext());
-            // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-            reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
-            return reactRootView;
-        }
-
-        @Override
-        protected boolean isConcurrentRootEnabled() {
-            // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
-            // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
-            return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
-        }
-    }
-
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
@@ -47,7 +21,7 @@ public class MainActivity extends NavigationActivity {
    }

    @Override
-    public void onConfigurationChanged(Configuration newConfig) {
+    public void onConfigurationChanged(@NonNull Configuration newConfig) {
        super.onConfigurationChanged(newConfig);

        if (newConfig.hardKeyboardHidden == Configuration.HARDKEYBOARDHIDDEN_NO) {
@@ -57,12 +31,6 @@ public class MainActivity extends NavigationActivity {
        }
    }

-    @Override
-    public void onWindowFocusChanged(boolean hasFocus) {
-        super.onWindowFocusChanged(hasFocus);
-        getReactGateway().onWindowFocusChanged(hasFocus);
-    }
-
    /*
    https://mattermost.atlassian.net/browse/MM-10601
    Required by react-native-hw-keyboard-event
@@ -70,24 +38,15 @@ public class MainActivity extends NavigationActivity {
    */
    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
-        if (HWKeyboardConnected) {
-            int keyCode = event.getKeyCode();
-            int keyAction = event.getAction();
-            if (keyAction == KeyEvent.ACTION_UP) {
-                if (keyCode == KeyEvent.KEYCODE_ENTER) {
-                    String keyPressed = event.isShiftPressed() ? "shift-enter" : "enter";
-                    HWKeyboardEventModule.getInstance().keyPressed(keyPressed);
-                    return true;
-                } else if (keyCode == KeyEvent.KEYCODE_K && event.isCtrlPressed()) {
-                    HWKeyboardEventModule.getInstance().keyPressed("find-channels");
-                    return true;
-                }
-            }
+        if (HWKeyboardConnected && event.getKeyCode() == KeyEvent.KEYCODE_ENTER && event.getAction() == KeyEvent.ACTION_UP) {
+            String keyPressed = event.isShiftPressed() ? "shift-enter" : "enter";
+            HWKeyboardEventModule.getInstance().keyPressed(keyPressed);
+            return true;
        }
        return super.dispatchKeyEvent(event);
-    };
+    }

    private void setHWKeyboardConnected() {
        HWKeyboardConnected = getResources().getConfiguration().keyboard == Configuration.KEYBOARD_QWERTY;
    }
-}
+}
--- a/android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java
+++ b/android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java
@@ -25,19 +25,16 @@ import com.wix.reactnativenotifications.core.JsIOHelper;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.TurboReactPackage;
-import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.module.model.ReactModuleInfo;
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.soloader.SoLoader;
-import com.facebook.react.config.ReactFeatureFlags;

-import com.mattermost.newarchitecture.MainApplicationReactNativeHost;
+import com.facebook.react.bridge.JSIModulePackage;


 public class MainApplication extends NavigationApplication implements INotificationsApplication, INotificationsDrawerApplication {
@@ -47,75 +44,68 @@ public class MainApplication extends NavigationApplication implements INotificat

  private Bundle mManagedConfig = null;

-  private final ReactNativeHost mReactNativeHost =
-    new ReactNativeHost(this) {
-      @Override
-      public boolean getUseDeveloperSupport() {
-        return BuildConfig.DEBUG;
-      }
+private final ReactNativeHost mReactNativeHost =
+  new ReactNativeHost(this) {
+    @Override
+    public boolean getUseDeveloperSupport() {
+      return BuildConfig.DEBUG;
+    }

-      @Override
-      protected List<ReactPackage> getPackages() {
-        List<ReactPackage> packages = new PackageList(this).getPackages();
-        // Packages that cannot be auto linked yet can be added manually here, for example:
-        // packages.add(new MyReactNativePackage());
-        packages.add(new RNNotificationsPackage(MainApplication.this));
-        packages.add(
-          new TurboReactPackage() {
-                @Override
-                public NativeModule getModule(String name, ReactApplicationContext reactContext) {
-                  switch (name) {
-                    case "MattermostManaged":
-                      return MattermostManagedModule.getInstance(reactContext);
-                    case "MattermostShare":
-                      return new ShareModule(instance, reactContext);
-                    case "NotificationPreferences":
-                      return NotificationPreferencesModule.getInstance(instance, reactContext);
-                    case "RNTextInputReset":
-                      return new RNTextInputResetModule(reactContext);
-                    default:
-                      throw new IllegalArgumentException("Could not find module " + name);
-                  }
-                }
-
-                @Override
-                public ReactModuleInfoProvider getReactModuleInfoProvider() {
-                  return () -> {
-                    Map<String, ReactModuleInfo> map = new HashMap<>();
-                    map.put("MattermostManaged", new ReactModuleInfo("MattermostManaged", "com.mattermost.rnbeta.MattermostManagedModule", false, false, false, false, false));
-                    map.put("MattermostShare", new ReactModuleInfo("MattermostShare", "com.mattermost.share.ShareModule", false, false, true, false, false));
-                    map.put("NotificationPreferences", new ReactModuleInfo("NotificationPreferences", "com.mattermost.rnbeta.NotificationPreferencesModule", false, false, false, false, false));
-                    map.put("RNTextInputReset", new ReactModuleInfo("RNTextInputReset", "com.mattermost.rnbeta.RNTextInputResetModule", false, false, false, false, false));
-                    return map;
-                  };
+    @Override
+    protected List<ReactPackage> getPackages() {
+      List<ReactPackage> packages = new PackageList(this).getPackages();
+      // Packages that cannot be auto linked yet can be added manually here, for example:
+      // packages.add(new MyReactNativePackage());
+      packages.add(new RNNotificationsPackage(MainApplication.this));
+      packages.add(
+        new TurboReactPackage() {
+              @Override
+              public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+                switch (name) {
+                  case "MattermostManaged":
+                    return MattermostManagedModule.getInstance(reactContext);
+                  case "MattermostShare":
+                    return new ShareModule(instance, reactContext);
+                  case "NotificationPreferences":
+                    return NotificationPreferencesModule.getInstance(instance, reactContext);
+                  case "RNTextInputReset":
+                    return new RNTextInputResetModule(reactContext);
+                  default:
+                    throw new IllegalArgumentException("Could not find module " + name);
                }
              }
-        );

-        return packages;
-      }
+              @Override
+              public ReactModuleInfoProvider getReactModuleInfoProvider() {
+                return () -> {
+                  Map<String, ReactModuleInfo> map = new HashMap<>();
+                  map.put("MattermostManaged", new ReactModuleInfo("MattermostManaged", "com.mattermost.rnbeta.MattermostManagedModule", false, false, false, false, false));
+                  map.put("MattermostShare", new ReactModuleInfo("MattermostShare", "com.mattermost.share.ShareModule", false, false, true, false, false));
+                  map.put("NotificationPreferences", new ReactModuleInfo("NotificationPreferences", "com.mattermost.rnbeta.NotificationPreferencesModule", false, false, false, false, false));
+                  map.put("RNTextInputReset", new ReactModuleInfo("RNTextInputReset", "com.mattermost.rnbeta.RNTextInputResetModule", false, false, false, false, false));
+                  return map;
+                };
+              }
+            }
+      );

-      @Override
-      protected String getJSMainModuleName() {
-        return "index";
-      }
+      return packages;
+    }

-      @Override
-      protected JSIModulePackage getJSIModulePackage() {
-        return (JSIModulePackage) new CustomMMKVJSIModulePackage();
-      }
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
+
+    @Override
+    protected JSIModulePackage getJSIModulePackage() {
+      return (JSIModulePackage) new CustomMMKVJSIModulePackage();
+    }
  };

-  private final ReactNativeHost mNewArchitectureNativeHost =
-      new MainApplicationReactNativeHost(this);
-
  @Override
  public ReactNativeHost getReactNativeHost() {
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      return mNewArchitectureNativeHost;
-    } else {
-      return mReactNativeHost;
-    }
+    return mReactNativeHost;
  }

  @Override
@@ -128,8 +118,6 @@ public class MainApplication extends NavigationApplication implements INotificat
    RealPathUtil.deleteTempFiles(tempFolder);
    Log.i("ReactNative", "Cleaning temp cache " + tempFolder.getAbsolutePath());

-    // If you opted-in for the New Architecture, we enable the TurboModule system
-    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }
--- a/android/app/src/main/jni/Android.mk
+++ b/android/app/src/main/jni/Android.mk
@@ -1,48 +0,0 @@
-THIS_DIR := $(call my-dir)
-
-include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
-
-# If you wish to add a custom TurboModule or Fabric component in your app you
-# will have to include the following autogenerated makefile.
-# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
-include $(CLEAR_VARS)
-
-LOCAL_PATH := $(THIS_DIR)
-
-# You can customize the name of your application .so file here.
-LOCAL_MODULE := mattermost_appmodules
-
-LOCAL_C_INCLUDES := $(LOCAL_PATH)
-LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
-LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
-
-# If you wish to add a custom TurboModule or Fabric component in your app you
-# will have to uncomment those lines to include the generated source
-# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
-#
-# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
-# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
-# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
-
-# Here you should add any native library you wish to depend on.
-LOCAL_SHARED_LIBRARIES := \
-  libfabricjni \
-  libfbjni \
-  libfolly_runtime \
-  libglog \
-  libjsi \
-  libreact_codegen_rncore \
-  libreact_debug \
-  libreact_nativemodule_core \
-  libreact_render_componentregistry \
-  libreact_render_core \
-  libreact_render_debug \
-  libreact_render_graphics \
-  librrc_view \
-  libruntimeexecutor \
-  libturbomodulejsijni \
-  libyoga
-
-LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
-
-include $(BUILD_SHARED_LIBRARY)
--- a/android/app/src/main/jni/CMakeLists.txt
+++ b/android/app/src/main/jni/CMakeLists.txt
@@ -0,0 +1,5 @@
+cmake_minimum_required(VERSION 3.13)
+# Define the library name here.
+project(rndiffapp_appmodules)
+# This file includes all the necessary to let you build your application with the New Architecture.
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
--- a/android/app/src/main/jni/MainApplicationModuleProvider.cpp
+++ b/android/app/src/main/jni/MainApplicationModuleProvider.cpp
@@ -1,12 +1,13 @@
 #include "MainApplicationModuleProvider.h"

+#include <rncli.h>
 #include <rncore.h>

 namespace facebook {
 namespace react {

 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
    const JavaTurboModule::InitParams &params) {
  // Here you can provide your own module provider for TurboModules coming from
  // either your application or from external libraries. The approach to follow
@@ -17,6 +18,13 @@ std::shared_ptr<TurboModule> MainApplicationModuleProvider(
  //    return module;
  // }
  // return rncore_ModuleProvider(moduleName, params);
+
+  // Module providers autolinked by RN CLI
+  auto rncli_module = rncli_ModuleProvider(moduleName, params);
+  if (rncli_module != nullptr) {
+    return rncli_module;
+  }
+
  return rncore_ModuleProvider(moduleName, params);
 }

--- a/android/app/src/main/jni/MainApplicationModuleProvider.h
+++ b/android/app/src/main/jni/MainApplicationModuleProvider.h
@@ -9,7 +9,7 @@ namespace facebook {
 namespace react {

 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
    const JavaTurboModule::InitParams &params);

 } // namespace react
--- a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
+++ b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
@@ -22,21 +22,21 @@ void MainApplicationTurboModuleManagerDelegate::registerNatives() {

 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
-    const std::shared_ptr<CallInvoker> jsInvoker) {
+    const std::string &name,
+    const std::shared_ptr<CallInvoker> &jsInvoker) {
  // Not implemented yet: provide pure-C++ NativeModules here.
  return nullptr;
 }

 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
+    const std::string &name,
    const JavaTurboModule::InitParams &params) {
  return MainApplicationModuleProvider(name, params);
 }

 bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
-    std::string name) {
+    const std::string &name) {
  return getTurboModule(name, nullptr) != nullptr ||
      getTurboModule(name, {.moduleName = name}) != nullptr;
 }
--- a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
+++ b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
@@ -14,24 +14,24 @@ class MainApplicationTurboModuleManagerDelegate
 public:
  // Adapt it to the package you used for your Java class.
  static constexpr auto kJavaDescriptor =
-      "Lcom/mattermost/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
+      "Lcom/rndiffapp/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";

  static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);

  static void registerNatives();

  std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
-      const std::shared_ptr<CallInvoker> jsInvoker) override;
+      const std::string &name,
+      const std::shared_ptr<CallInvoker> &jsInvoker) override;
  std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
+      const std::string &name,
      const JavaTurboModule::InitParams &params) override;

  /**
   * Test-only method. Allows user to verify whether a TurboModule can be
   * created by instances of this class.
   */
-  bool canCreateTurboModule(std::string name);
+  bool canCreateTurboModule(const std::string &name);
 };

 } // namespace react
--- a/android/app/src/main/jni/MainComponentsRegistry.cpp
+++ b/android/app/src/main/jni/MainComponentsRegistry.cpp
@@ -4,6 +4,7 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/rncore/ComponentDescriptors.h>
+#include <rncli.h>

 namespace facebook {
 namespace react {
@@ -14,6 +15,9 @@ std::shared_ptr<ComponentDescriptorProviderRegistry const>
 MainComponentsRegistry::sharedProviderRegistry() {
  auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();

+  // Autolinked providers registered by RN CLI
+  rncli_registerProviders(providerRegistry);
+
  // Custom Fabric Components go here. You can register custom
  // components coming from your App or from 3rd party libraries here.
  //
--- a/android/app/src/main/jni/MainComponentsRegistry.h
+++ b/android/app/src/main/jni/MainComponentsRegistry.h
@@ -1,32 +0,0 @@
-#pragma once
-
-#include <ComponentFactory.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
-
-namespace facebook {
-namespace react {
-
-class MainComponentsRegistry
-    : public facebook::jni::HybridClass<MainComponentsRegistry> {
- public:
-  // Adapt it to the package you used for your Java class.
-  constexpr static auto kJavaDescriptor =
-      "Lcom/mattermost/newarchitecture/components/MainComponentsRegistry;";
-
-  static void registerNatives();
-
-  MainComponentsRegistry(ComponentFactory *delegate);
-
- private:
-  static std::shared_ptr<ComponentDescriptorProviderRegistry const>
-  sharedProviderRegistry();
-
-  static jni::local_ref<jhybriddata> initHybrid(
-      jni::alias_ref<jclass>,
-      ComponentFactory *delegate);
-};
-
-} // namespace react
-} // namespace facebook
--- a/android/app/src/main/jni/OnLoad.cpp
+++ b/android/app/src/main/jni/OnLoad.cpp
@@ -1,11 +0,0 @@
-#include <fbjni/fbjni.h>
-#include "MainApplicationTurboModuleManagerDelegate.h"
-#include "MainComponentsRegistry.h"
-
-JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
-  return facebook::jni::initialize(vm, [] {
-    facebook::react::MainApplicationTurboModuleManagerDelegate::
-        registerNatives();
-    facebook::react::MainComponentsRegistry::registerNatives();
-  });
-}
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -10,13 +10,8 @@ buildscript {
        kotlinVersion = "1.5.30"
        firebaseVersion = "21.0.0"
        RNNKotlinVersion = kotlinVersion
-         if (System.properties['os.arch'] == "aarch64") {
-            // For M1 Users we need to use the NDK 24 which added support for aarch64
-            ndkVersion = "24.0.8215888"
-        } else {
-            // Otherwise we default to the side-by-side NDK version from AGP.
-            ndkVersion = "21.4.7075529"
-        }
+        ndkVersion = "21.4.7075529"
+ 
    }
    repositories {
        google()
@@ -24,9 +19,7 @@ buildscript {
        mavenLocal()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.1'
-        classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("de.undercouch:gradle-download-task:5.0.1")
+        classpath 'com.android.tools.build:gradle:4.2.2'
        classpath 'com.google.gms:google-services:4.3.10'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx1024m -XX:MaxMetaspaceSize=512m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m

 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -29,15 +29,4 @@ android.useAndroidX=true
 android.enableJetifier=true

 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.125.0
-
-# Use this property to specify which architecture you want to build.
-# You can also override it from the CLI using
-# ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-# Use this property to enable support to the new architecture.
-# This will allow you to use TurboModules and the Fabric render in
-# your application. You should enable this flag either if you want
-# to write custom TurboModules/Fabric components OR use libraries that
-# are providing them.
-newArchEnabled=false
+FLIPPER_VERSION=0.99.0
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -3,10 +3,3 @@ include ':reactnativenotifications'
 project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/lib/android/app')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
-includeBuild('../node_modules/react-native-gradle-plugin')
-if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
-    include(":ReactAndroid")
-    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
-    include(":ReactAndroid:hermes-engine")
-    project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
-}
--- a/app/components/snapshots/badge.test.js.snap
+++ b/app/components/snapshots/badge.test.js.snap
@@ -3,14 +3,14 @@
 exports[`Badge should match snapshot 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "borderRadius": 20,
        "position": "absolute",
        "right": 30,
        "top": 2,
      },
-      {
+      Object {
        "borderColor": "#000000",
      },
    ]
@@ -19,18 +19,18 @@ exports[`Badge should match snapshot 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#444",
          "height": 20,
          "padding": 12,
          "paddingBottom": 3,
          "paddingTop": 3,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
-        {
+        Object {
          "opacity": 0,
        },
      ]
@@ -38,7 +38,7 @@ exports[`Badge should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "alignSelf": "center",
          "flex": 1,
@@ -48,7 +48,7 @@ exports[`Badge should match snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -60,12 +60,12 @@ exports[`Badge should match snapshot 1`] = `
        <Text
          onLayout={[Function]}
          style={
-            [
-              {
+            Array [
+              Object {
                "color": "white",
                "fontSize": 14,
              },
-              {
+              Object {
                "color": "#145dbf",
                "fontSize": 10,
              },
--- a/app/components/snapshots/fade.test.js.snap
+++ b/app/components/snapshots/fade.test.js.snap
@@ -4,10 +4,10 @@ exports[`Fade should render {opacity: 0} 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
  pointerEvents="box-none"
  style={
-    {
+    Object {
      "opacity": 0,
-      "transform": [
-        {
+      "transform": Array [
+        Object {
          "scale": 0,
        },
      ],
@@ -24,10 +24,10 @@ exports[`Fade should render {opacity: 1} 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
  pointerEvents="box-none"
  style={
-    {
+    Object {
      "opacity": 1,
-      "transform": [
-        {
+      "transform": Array [
+        Object {
          "scale": 1,
        },
      ],
--- a/app/components/snapshots/profile_picture_button.test.js.snap
+++ b/app/components/snapshots/profile_picture_button.test.js.snap
@@ -9,14 +9,14 @@ exports[`profile_picture_button should match snapshot 1`] = `
  canTakePhoto={true}
  canTakeVideo={true}
  extraOptions={
-    [
+    Array [
      null,
    ]
  }
  maxFileCount={5}
  maxFileSize={20971520}
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
@@ -45,6 +45,6 @@ exports[`profile_picture_button should match snapshot 1`] = `
    }
  }
  uploadFiles={[MockFunction]}
-  validMimeTypes={[]}
+  validMimeTypes={Array []}
 />
 `;
--- a/app/components/snapshots/swiper.test.js.snap
+++ b/app/components/snapshots/swiper.test.js.snap
@@ -4,8 +4,8 @@ exports[`Swiper should match snapshot 1`] = `
 <View
  onLayout={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "backgroundColor": "transparent",
        "flex": 1,
        "position": "relative",
@@ -17,8 +17,8 @@ exports[`Swiper should match snapshot 1`] = `
    automaticallyAdjustContentInsets={true}
    bounces={false}
    contentContainerStyle={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "transparent",
        },
        undefined,
--- a/app/components/announcement_banner/snapshots/announcement_banner.test.js.snap
+++ b/app/components/announcement_banner/snapshots/announcement_banner.test.js.snap
@@ -8,8 +8,8 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
  bannerText="Banner Text"
  bannerTextColor="#fff"
  intl={
-    {
-      "defaultFormats": {},
+    Object {
+      "defaultFormats": Object {},
      "defaultLocale": "en",
      "formatDate": [Function],
      "formatHTMLMessage": [Function],
@@ -18,8 +18,8 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
      "formatPlural": [Function],
      "formatRelative": [Function],
      "formatTime": [Function],
-      "formats": {},
-      "formatters": {
+      "formats": Object {},
+      "formatters": Object {
        "getDateTimeFormat": [Function],
        "getMessageFormat": [Function],
        "getNumberFormat": [Function],
@@ -27,7 +27,7 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
        "getRelativeFormat": [Function],
      },
      "locale": "en",
-      "messages": {},
+      "messages": Object {},
      "now": [Function],
      "onError": [Function],
      "textComponent": "span",
@@ -35,7 +35,7 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
    }
  }
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
@@ -74,8 +74,8 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
  bannerText="Banner Text"
  bannerTextColor="#fff"
  intl={
-    {
-      "defaultFormats": {},
+    Object {
+      "defaultFormats": Object {},
      "defaultLocale": "en",
      "formatDate": [Function],
      "formatHTMLMessage": [Function],
@@ -84,8 +84,8 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
      "formatPlural": [Function],
      "formatRelative": [Function],
      "formatTime": [Function],
-      "formats": {},
-      "formatters": {
+      "formats": Object {},
+      "formatters": Object {
        "getDateTimeFormat": [Function],
        "getMessageFormat": [Function],
        "getNumberFormat": [Function],
@@ -93,7 +93,7 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
        "getRelativeFormat": [Function],
      },
      "locale": "en",
-      "messages": {},
+      "messages": Object {},
      "now": [Function],
      "onError": [Function],
      "textComponent": "span",
@@ -101,7 +101,7 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
    }
  }
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
--- a/app/components/at_mention/snapshots/at_mention.test.js.snap
+++ b/app/components/at_mention/snapshots/at_mention.test.js.snap
@@ -3,13 +3,13 @@
 exports[`AtMention should match snapshot, no highlight 1`] = `
 <Text
  style={
-    {
+    Object {
      "backgroundColor": "yellow",
    }
  }
 >
  <Text
-    style={[]}
+    style={Array []}
  >
    @John.Smith
  </Text>
@@ -21,18 +21,18 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
  onLongPress={[Function]}
  onPress={[Function]}
  style={
-    {
+    Object {
      "backgroundColor": "yellow",
    }
  }
 >
  <Text
    style={
-      [
-        {
+      Array [
+        Object {
          "color": "#ff0000",
        },
-        {
+        Object {
          "backgroundColor": "#ffd470",
          "color": "#1b1d22",
        },
@@ -49,15 +49,15 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
  onLongPress={[Function]}
  onPress={[Function]}
  style={
-    {
+    Object {
      "backgroundColor": "yellow",
    }
  }
 >
  <Text
    style={
-      [
-        {
+      Array [
+        Object {
          "color": "#ff0000",
        },
      ]
--- a/app/components/attachment_button/snapshots/index.test.js.snap
+++ b/app/components/attachment_button/snapshots/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`AttachmentButton should match snapshot 1`] = `
 <TouchableWithFeedbackIOS
  onPress={[Function]}
  style={
-    {
+    Object {
      "alignItems": "center",
      "height": 34,
      "justifyContent": "center",
@@ -18,7 +18,7 @@ exports[`AttachmentButton should match snapshot 1`] = `
    name="plus"
    size={30}
    style={
-      {
+      Object {
        "marginTop": 2,
      }
    }
--- a/app/components/autocomplete/autocomplete.js
+++ b/app/components/autocomplete/autocomplete.js
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {
    Keyboard,
    Platform,
    View,
+    ViewPropTypes,
 } from 'react-native';

 import {DeviceTypes} from '@constants';
--- a/app/components/autocomplete/emoji_suggestion/snapshots/emoji_suggestion.test.js.snap
+++ b/app/components/autocomplete/emoji_suggestion/snapshots/emoji_suggestion.test.js.snap
@@ -5,7 +5,7 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 1`] = `n
 exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
 <FlatList
  data={
-    [
+    Array [
      "+1",
      "-1",
      "100",
@@ -2342,9 +2342,9 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
    ]
  }
  extraData={
-    {
+    Object {
      "active": true,
-      "dataSource": [
+      "dataSource": Array [
        "+1",
        "-1",
        "100",
@@ -4689,13 +4689,13 @@ exports[`components/autocomplete/emoji_suggestion should match snapshot 2`] = `
  removeClippedSubviews={true}
  renderItem={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "backgroundColor": "#ffffff",
        "borderRadius": 4,
        "paddingTop": 16,
      },
-      {
+      Object {
        "maxHeight": undefined,
      },
    ]
--- a/app/components/autocomplete/slash_suggestion/snapshots/slash_suggestion.test.tsx.snap
+++ b/app/components/autocomplete/slash_suggestion/snapshots/slash_suggestion.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`components/autocomplete/slash_suggestion should match snapshot 1`] = `
 <FlatList
  data={
-    [
-      {
+    Array [
+      Object {
        "Complete": "thetrigger",
        "Description": "The Description",
        "Hint": "The Hint",
@@ -14,10 +14,10 @@ exports[`components/autocomplete/slash_suggestion should match snapshot 1`] = `
    ]
  }
  extraData={
-    {
+    Object {
      "active": true,
-      "dataSource": [
-        {
+      "dataSource": Array [
+        Object {
          "Complete": "thetrigger",
          "Description": "The Description",
          "Hint": "The Hint",
@@ -34,14 +34,14 @@ exports[`components/autocomplete/slash_suggestion should match snapshot 1`] = `
  removeClippedSubviews={true}
  renderItem={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "backgroundColor": "#ffffff",
        "borderRadius": 4,
        "flex": 1,
        "paddingTop": 8,
      },
-      {
+      Object {
        "maxHeight": 50,
      },
    ]
--- a/app/components/autocomplete/slash_suggestion/app_slash_suggestion/snapshots/app_slash_suggestion.test.tsx.snap
+++ b/app/components/autocomplete/slash_suggestion/app_slash_suggestion/snapshots/app_slash_suggestion.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`components/autocomplete/app_slash_suggestion should match snapshot 1`] = `
 <FlatList
  data={
-    [
-      {
+    Array [
+      Object {
        "Complete": "thetrigger",
        "Description": "The Description",
        "Hint": "The Hint",
@@ -19,14 +19,14 @@ exports[`components/autocomplete/app_slash_suggestion should match snapshot 1`]
  removeClippedSubviews={true}
  renderItem={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "backgroundColor": "#ffffff",
        "borderRadius": 4,
        "flex": 1,
        "paddingTop": 8,
      },
-      {
+      Object {
        "maxHeight": 50,
      },
    ]
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
@@ -36,10 +36,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
        iconColor: {
            tintColor: theme.centerChannelColor,
        },
-        iconSize: {
-            width: 10,
-            height: 16,
-        },
        container: {
            flexDirection: 'row',
            alignItems: 'center',
@@ -104,14 +100,18 @@ const SlashSuggestionItem = (props: Props) => {

    let image = (
        <Image
-            style={[style.iconColor, style.iconSize]}
+            style={style.iconColor}
+            width={10}
+            height={16}
            source={slashIcon}
        />
    );
    if (props.icon === COMMAND_SUGGESTION_ERROR) {
        image = (
            <Image
-                style={[style.iconColor, style.iconSize]}
+                style={style.iconColor}
+                width={10}
+                height={16}
                source={bangIcon}
            />
        );
--- a/app/components/autocomplete_selector/autocomplete_selector.tsx
+++ b/app/components/autocomplete_selector/autocomplete_selector.tsx
@@ -204,7 +204,6 @@ export default class AutocompleteSelector extends PureComponent<Props, State> {
    goToSelectorScreen = preventDoubleTap(async () => {
        const closeButton = await CompassIcon.getImageSource(Platform.select({ios: 'arrow-back-ios', default: 'arrow-left'}), 24, this.props.theme.sidebarHeaderTextColor);

-        // @ts-expect-error context type definition
        const {formatMessage} = this.context.intl;
        const {actions, dataSource, options, placeholder, getDynamicOptions, theme} = this.props;
        const screen = 'SelectorScreen';
@@ -234,7 +233,6 @@ export default class AutocompleteSelector extends PureComponent<Props, State> {
    });

    render() {
-        // @ts-expect-error context type definition
        const {intl} = this.context;
        const {
            placeholder,
--- a/app/components/avatars/snapshots/avatars.test.tsx.snap
+++ b/app/components/avatars/snapshots/avatars.test.tsx.snap
@@ -7,14 +7,14 @@ exports[`Avatars should match snapshot for overflow 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "flexDirection": "row",
      }
    }
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#ffffff",
          "borderColor": "#ffffff",
@@ -31,7 +31,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
        size={24}
        testID="avatars.profile_picture"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -64,7 +64,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#ffffff",
          "borderColor": "#ffffff",
@@ -82,7 +82,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
        size={24}
        testID="avatars.profile_picture"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -115,7 +115,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#ffffff",
          "borderColor": "#ffffff",
@@ -133,7 +133,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
        size={24}
        testID="avatars.profile_picture"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -166,7 +166,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#ffffff",
          "borderColor": "#ffffff",
@@ -181,7 +181,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "alignItems": "center",
            "backgroundColor": "rgba(63,67,80,0.08)",
            "borderColor": "#ffffff",
@@ -195,7 +195,7 @@ exports[`Avatars should match snapshot for overflow 1`] = `
      >
        <Text
          style={
-            {
+            Object {
              "color": "rgba(63,67,80,0.64)",
              "fontSize": 10,
              "fontWeight": "bold",
@@ -218,14 +218,14 @@ exports[`Avatars should match snapshot for single avatar 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "flexDirection": "row",
      }
    }
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#ffffff",
          "borderColor": "#ffffff",
@@ -242,7 +242,7 @@ exports[`Avatars should match snapshot for single avatar 1`] = `
        size={24}
        testID="avatars.profile_picture"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
--- a/app/components/badge.js
+++ b/app/components/badge.js
@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {ViewPropTypes, TextPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {
@@ -10,6 +9,7 @@ import {
    Text,
    TouchableWithoutFeedback,
    View,
+    ViewPropTypes,
 } from 'react-native';

 import {CHANNEL_ITEM_LARGE_BADGE_MAX_WIDTH, CHANNEL_ITEM_SMALL_BADGE_MAX_WIDTH, LARGE_BADGE_MAX_WIDTH, SMALL_BADGE_MAX_WIDTH} from '@constants/view';
@@ -27,7 +27,7 @@ export default class Badge extends PureComponent {
        count: PropTypes.number.isRequired,
        extraPaddingHorizontal: PropTypes.number,
        style: ViewPropTypes.style,
-        countStyle: TextPropTypes.style,
+        countStyle: Text.propTypes.style,
        minHeight: PropTypes.number,
        minWidth: PropTypes.number,
        isChannelItem: PropTypes.bool,
--- a/app/components/channel_link/snapshots/channel_link.test.js.snap
+++ b/app/components/channel_link/snapshots/channel_link.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ChannelLink should match snapshot 1`] = `
 <Text
  style={
-    {
+    Object {
      "color": "#3d3c40",
      "fontSize": 15,
      "lineHeight": 20,
@@ -13,7 +13,7 @@ exports[`ChannelLink should match snapshot 1`] = `
  <Text
    onPress={[Function]}
    style={
-      {
+      Object {
        "color": "#2389d7",
      }
    }
--- a/app/components/channel_loader/snapshots/channel_loader.test.js.snap
+++ b/app/components/channel_loader/snapshots/channel_loader.test.js.snap
@@ -4,13 +4,13 @@ exports[`ChannelLoader should match snapshot 1`] = `
 <View
  onLayout={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "flex": 1,
        "overflow": "hidden",
      },
      undefined,
-      {
+      Object {
        "backgroundColor": "#ffffff",
      },
    ]
@@ -18,15 +18,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
 >
  <ForwardRef(AnimatedComponentWrapper)
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#3D3C40",
          "height": 38,
          "position": "absolute",
          "width": "100%",
          "zIndex": 9,
        },
-        {
+        Object {
          "top": -38,
        },
      ]
@@ -34,13 +34,13 @@ exports[`ChannelLoader should match snapshot 1`] = `
  >
    <ForwardRef(AnimatedComponentWrapper)
      edges={
-        [
+        Array [
          "left",
          "right",
        ]
      }
      style={
-        {
+        Object {
          "alignItems": "center",
          "flexDirection": "row",
          "height": 38,
@@ -51,7 +51,7 @@ exports[`ChannelLoader should match snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "alignItems": "flex-start",
            "height": 24,
            "justifyContent": "center",
@@ -68,7 +68,7 @@ exports[`ChannelLoader should match snapshot 1`] = `
        defaultMessage="Still trying to load your content..."
        id="mobile.channel_loader.still_loading"
        style={
-          {
+          Object {
            "color": "#fff",
            "fontWeight": "bold",
          }
@@ -78,15 +78,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </ForwardRef(AnimatedComponentWrapper)>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -96,8 +96,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -118,15 +118,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -136,8 +136,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -158,15 +158,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -176,8 +176,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -198,15 +198,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -216,8 +216,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -238,15 +238,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -256,8 +256,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -278,15 +278,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -296,8 +296,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -318,15 +318,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -336,8 +336,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -358,15 +358,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -376,8 +376,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -398,15 +398,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -416,8 +416,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -438,15 +438,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -456,8 +456,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -478,15 +478,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -496,8 +496,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -518,15 +518,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -536,8 +536,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
@@ -558,15 +558,15 @@ exports[`ChannelLoader should match snapshot 1`] = `
  </View>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "marginVertical": 10,
          "paddingLeft": 12,
          "paddingRight": 20,
        },
-        {
+        Object {
          "backgroundColor": "#ffffff",
        },
      ]
@@ -576,8 +576,8 @@ exports[`ChannelLoader should match snapshot 1`] = `
      Animation={[Function]}
      Left={[Function]}
      styles={
-        {
-          "left": {
+        Object {
+          "left": Object {
            "color": "rgba(63,67,80,0.15)",
          },
        }
--- a/app/components/custom_list/snapshots/index.test.js.snap
+++ b/app/components/custom_list/snapshots/index.test.js.snap
@@ -6,16 +6,16 @@ exports[`CustomList should match snapshot with FlatList 1`] = `
  ListEmptyComponent={[Function]}
  ListFooterComponent={[Function]}
  contentContainerStyle={
-    {
+    Object {
      "flexGrow": 1,
    }
  }
  data={
-    [
-      {
+    Array [
+      Object {
        "username": "username_1",
      },
-      {
+      Object {
        "username": "username_2",
      },
    ]
@@ -32,7 +32,7 @@ exports[`CustomList should match snapshot with FlatList 1`] = `
  scrollEventThrottle={60}
  stickySectionHeadersEnabled={true}
  style={
-    {
+    Object {
      "backgroundColor": "#ffffff",
      "flex": 1,
    }
@@ -46,7 +46,7 @@ exports[`CustomList should match snapshot with SectionList 1`] = `
  ListEmptyComponent={[Function]}
  ListFooterComponent={[Function]}
  contentContainerStyle={
-    {
+    Object {
      "flexGrow": 1,
    }
  }
@@ -63,18 +63,18 @@ exports[`CustomList should match snapshot with SectionList 1`] = `
  renderSectionHeader={[Function]}
  scrollEventThrottle={60}
  sections={
-    [
-      {
+    Array [
+      Object {
        "username": "username_1",
      },
-      {
+      Object {
        "username": "username_2",
      },
    ]
  }
  stickySectionHeadersEnabled={false}
  style={
-    {
+    Object {
      "backgroundColor": "#ffffff",
      "flex": 1,
    }
@@ -89,14 +89,14 @@ exports[`CustomList should match snapshot, renderFooter 2`] = `<View />`;
 exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
 <View
  style={
-    {
+    Object {
      "backgroundColor": "#ffffff",
    }
  }
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "rgba(63,67,80,0.07)",
        "paddingLeft": 10,
        "paddingVertical": 2,
@@ -105,7 +105,7 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
  >
    <Text
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontWeight": "600",
        }
@@ -120,7 +120,7 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
 exports[`CustomList should match snapshot, renderSeparator 1`] = `
 <View
  style={
-    {
+    Object {
      "backgroundColor": "rgba(63,67,80,0.1)",
      "flex": 1,
      "height": 1,
--- a/app/components/custom_list/user_list_row/snapshots/user_list_test.test.js.snap
+++ b/app/components/custom_list/user_list_row/snapshots/user_list_test.test.js.snap
@@ -3,7 +3,7 @@
 exports[`UserListRow should match snapshot 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "overflow": "hidden",
@@ -19,7 +19,7 @@ exports[`UserListRow should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "color": "#3f4350",
          "flexDirection": "row",
@@ -35,7 +35,7 @@ exports[`UserListRow should match snapshot 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "justifyContent": "center",
@@ -47,7 +47,7 @@ exports[`UserListRow should match snapshot 1`] = `
      <View>
        <View
          style={
-            {
+            Object {
              "flexDirection": "row",
            }
          }
@@ -56,7 +56,7 @@ exports[`UserListRow should match snapshot 1`] = `
            ellipsizeMode="tail"
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
              }
@@ -68,7 +68,7 @@ exports[`UserListRow should match snapshot 1`] = `
          <BotTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -100,7 +100,7 @@ exports[`UserListRow should match snapshot 1`] = `
          <GuestTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -139,7 +139,7 @@ exports[`UserListRow should match snapshot 1`] = `
 exports[`UserListRow should match snapshot for  currentUser with (you) populated in list 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "overflow": "hidden",
@@ -155,7 +155,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "color": "#3f4350",
          "flexDirection": "row",
@@ -171,7 +171,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "justifyContent": "center",
@@ -183,7 +183,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
      <View>
        <View
          style={
-            {
+            Object {
              "flexDirection": "row",
            }
          }
@@ -192,7 +192,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
            ellipsizeMode="tail"
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
              }
@@ -204,7 +204,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
          <BotTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -236,7 +236,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
          <GuestTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -275,7 +275,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
 exports[`UserListRow should match snapshot for deactivated user 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "overflow": "hidden",
@@ -291,7 +291,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "color": "#3f4350",
          "flexDirection": "row",
@@ -307,7 +307,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "justifyContent": "center",
@@ -319,7 +319,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
      <View>
        <View
          style={
-            {
+            Object {
              "flexDirection": "row",
            }
          }
@@ -328,7 +328,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
            ellipsizeMode="tail"
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
              }
@@ -340,7 +340,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
          <BotTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -372,7 +372,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
          <GuestTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -406,7 +406,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
      <View>
        <Text
          style={
-            {
+            Object {
              "color": undefined,
              "fontSize": 12,
              "marginTop": 2,
@@ -424,7 +424,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
 exports[`UserListRow should match snapshot for guest user 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "overflow": "hidden",
@@ -440,7 +440,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "color": "#3f4350",
          "flexDirection": "row",
@@ -456,7 +456,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "justifyContent": "center",
@@ -468,7 +468,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
      <View>
        <View
          style={
-            {
+            Object {
              "flexDirection": "row",
            }
          }
@@ -477,7 +477,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
            ellipsizeMode="tail"
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
              }
@@ -489,7 +489,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
          <BotTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -521,7 +521,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
          <GuestTag
            show={true}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -560,7 +560,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
 exports[`UserListRow should match snapshot for remote user 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "overflow": "hidden",
@@ -576,7 +576,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "color": "#3f4350",
          "flexDirection": "row",
@@ -592,7 +592,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "justifyContent": "center",
@@ -604,7 +604,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
      <View>
        <View
          style={
-            {
+            Object {
              "flexDirection": "row",
            }
          }
@@ -613,7 +613,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
            ellipsizeMode="tail"
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
              }
@@ -625,7 +625,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
          <BotTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -657,7 +657,7 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
          <GuestTag
            show={false}
            theme={
-              {
+              Object {
                "awayIndicator": "#ffbc1f",
                "buttonBg": "#1c58d9",
                "buttonColor": "#ffffff",
@@ -700,13 +700,13 @@ exports[`UserListRow should match snapshot for remote user 1`] = `
      shared={true}
      size={18}
      style={
-        {
+        Object {
          "alignSelf": "center",
          "opacity": 0.75,
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
--- a/app/components/custom_status/snapshots/clear_button.test.tsx.snap
+++ b/app/components/custom_status/snapshots/clear_button.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`components/custom_status/clear_button should match snapshot 1`] = `
 <TouchableOpacity
  onPress={[Function]}
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flex": 1,
        "justifyContent": "center",
      },
-      {
+      Object {
        "height": 40,
        "width": 40,
      },
@@ -21,7 +21,7 @@ exports[`components/custom_status/clear_button should match snapshot 1`] = `
    name="close-circle"
    size={20}
    style={
-      {
+      Object {
        "borderRadius": 1000,
        "color": "rgba(63,67,80,0.52)",
      }
--- a/app/components/custom_status/snapshots/custom_status_emoji.test.tsx.snap
+++ b/app/components/custom_status/snapshots/custom_status_emoji.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`]
 >
  <Text
    style={
-      [
+      Array [
        undefined,
-        {
+        Object {
          "fontSize": 16,
        },
      ]
@@ -25,9 +25,9 @@ exports[`components/custom_status/custom_status_emoji should match snapshot with
 >
  <Text
    style={
-      [
+      Array [
        undefined,
-        {
+        Object {
          "fontSize": 34,
        },
      ]
--- a/app/components/custom_status/snapshots/custom_status_expiry.test.tsx.snap
+++ b/app/components/custom_status/snapshots/custom_status_expiry.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`components/custom_status/custom_status_expiry should match snapshot 1`] = `
 <Text
  style={
-    [
-      {
+    Array [
+      Object {
        "color": "#3f4350",
        "fontSize": 15,
      },
-      {},
+      Object {},
    ]
  }
  testID=""
@@ -22,12 +22,12 @@ exports[`components/custom_status/custom_status_expiry should match snapshot 1`]
 exports[`components/custom_status/custom_status_expiry should match snapshot with prefix and brackets 1`] = `
 <Text
  style={
-    [
-      {
+    Array [
+      Object {
        "color": "#3f4350",
        "fontSize": 15,
      },
-      {},
+      Object {},
    ]
  }
  testID=""
--- a/app/components/custom_status/snapshots/custom_status_text.test.tsx.snap
+++ b/app/components/custom_status/snapshots/custom_status_text.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`components/custom_status/custom_status_text should match snapshot 1`] = `
 <Text
  style={
-    [
-      {
+    Array [
+      Object {
        "color": "rgba(63,67,80,0.5)",
        "fontSize": 17,
        "includeFontPadding": false,
@@ -21,8 +21,8 @@ exports[`components/custom_status/custom_status_text should match snapshot 1`] =
 exports[`components/custom_status/custom_status_text should match snapshot with empty text 1`] = `
 <Text
  style={
-    [
-      {
+    Array [
+      Object {
        "color": "rgba(63,67,80,0.5)",
        "fontSize": 17,
        "includeFontPadding": false,
--- a/app/components/edit_channel_info/snapshots/edit_channel_info.test.js.snap
+++ b/app/components/edit_channel_info/snapshots/edit_channel_info.test.js.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`EditChannelInfo should match snapshot 1`] = `
-<ForwardRef
+<RNCSafeAreaView
  edges={
-    [
+    Array [
      "bottom",
      "left",
      "right",
    ]
  }
  style={
-    {
+    Object {
      "flex": 1,
    }
  }
@@ -26,7 +26,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
    scrollToInputAdditionalOffset={75}
    startScrolledToBottom={false}
    style={
-      {
+      Object {
        "flex": 1,
      }
    }
@@ -37,7 +37,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "backgroundColor": "rgba(63,67,80,0.06)",
            "flex": 1,
            "paddingTop": 30,
@@ -47,7 +47,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
        <View>
          <View
            style={
-              {
+              Object {
                "flexDirection": "row",
                "marginTop": 30,
              }
@@ -57,7 +57,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              defaultMessage="Name"
              id="channel_modal.name"
              style={
-                {
+                Object {
                  "color": "#3f4350",
                  "fontSize": 14,
                  "marginLeft": 15,
@@ -67,7 +67,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
          </View>
          <View
            style={
-              {
+              Object {
                "backgroundColor": "#ffffff",
                "marginTop": 10,
              }
@@ -82,14 +82,14 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              maxLength={64}
              onChangeText={[Function]}
              placeholder={
-                {
-                  "defaultMessage": "E.g.: "Bugs", "Marketing", "客户支持"",
+                Object {
+                  "defaultMessage": "E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\"",
                  "id": "channel_modal.nameEx",
                }
              }
              placeholderTextColor="rgba(63,67,80,0.5)"
              style={
-                {
+                Object {
                  "color": "#3f4350",
                  "fontSize": 14,
                  "height": 40,
@@ -103,7 +103,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
          </View>
          <View
            style={
-              {
+              Object {
                "flexDirection": "row",
                "marginTop": 30,
              }
@@ -113,7 +113,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              defaultMessage="Purpose"
              id="channel_modal.purpose"
              style={
-                {
+                Object {
                  "color": "#3f4350",
                  "fontSize": 14,
                  "marginLeft": 15,
@@ -124,7 +124,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              defaultMessage="(optional)"
              id="channel_modal.optional"
              style={
-                {
+                Object {
                  "color": "rgba(63,67,80,0.5)",
                  "fontSize": 14,
                  "marginLeft": 5,
@@ -134,7 +134,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
          </View>
          <View
            style={
-              {
+              Object {
                "backgroundColor": "#ffffff",
                "marginTop": 10,
              }
@@ -150,21 +150,21 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              multiline={true}
              onChangeText={[Function]}
              placeholder={
-                {
-                  "defaultMessage": "E.g.: "A channel to file bugs and improvements"",
+                Object {
+                  "defaultMessage": "E.g.: \\"A channel to file bugs and improvements\\"",
                  "id": "channel_modal.purposeEx",
                }
              }
              placeholderTextColor="rgba(63,67,80,0.5)"
              style={
-                [
-                  {
+                Array [
+                  Object {
                    "color": "#3f4350",
                    "fontSize": 14,
                    "height": 40,
                    "paddingHorizontal": 15,
                  },
-                  {
+                  Object {
                    "height": 110,
                  },
                ]
@@ -180,7 +180,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
              defaultMessage="Describe how this channel should be used."
              id="channel_modal.descriptionHelp"
              style={
-                {
+                Object {
                  "color": "rgba(63,67,80,0.5)",
                  "fontSize": 14,
                  "marginHorizontal": 15,
@@ -193,7 +193,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
        <View
          onLayout={[Function]}
          style={
-            {
+            Object {
              "flexDirection": "row",
              "marginTop": 15,
            }
@@ -203,7 +203,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
            defaultMessage="Header"
            id="channel_modal.header"
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 14,
                "marginLeft": 15,
@@ -214,7 +214,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
            defaultMessage="(optional)"
            id="channel_modal.optional"
            style={
-              {
+              Object {
                "color": "rgba(63,67,80,0.5)",
                "fontSize": 14,
                "marginLeft": 5,
@@ -224,7 +224,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
        </View>
        <View
          style={
-            {
+            Object {
              "backgroundColor": "#ffffff",
              "marginTop": 10,
            }
@@ -241,21 +241,21 @@ exports[`EditChannelInfo should match snapshot 1`] = `
            onChangeText={[Function]}
            onFocus={[Function]}
            placeholder={
-              {
-                "defaultMessage": "E.g.: "[Link Title](http://example.com)"",
+              Object {
+                "defaultMessage": "E.g.: \\"[Link Title](http://example.com)\\"",
                "id": "channel_modal.headerEx",
              }
            }
            placeholderTextColor="rgba(63,67,80,0.5)"
            style={
-              [
-                {
+              Array [
+                Object {
                  "color": "#3f4350",
                  "fontSize": 14,
                  "height": 40,
                  "paddingHorizontal": 15,
                },
-                {
+                Object {
                  "height": 110,
                },
              ]
@@ -268,7 +268,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
        </View>
        <View
          style={
-            {
+            Object {
              "zIndex": -1,
            }
          }
@@ -277,7 +277,7 @@ exports[`EditChannelInfo should match snapshot 1`] = `
            defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
            id="channel_modal.headerHelp"
            style={
-              {
+              Object {
                "color": "rgba(63,67,80,0.5)",
                "fontSize": 14,
                "marginHorizontal": 15,
@@ -291,14 +291,14 @@ exports[`EditChannelInfo should match snapshot 1`] = `
  </KeyboardAwareScrollView>
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "justifyContent": "flex-end",
          "position": "absolute",
          "width": "100%",
        },
-        {
+        Object {
          "bottom": 0,
        },
      ]
@@ -312,12 +312,12 @@ exports[`EditChannelInfo should match snapshot 1`] = `
      onChangeText={[Function]}
      onKeyboardOffsetChanged={[Function]}
      style={
-        {
+        Object {
          "position": undefined,
        }
      }
      value="header"
    />
  </View>
-</ForwardRef>
+</RNCSafeAreaView>
 `;
--- a/app/components/emoji_picker/snapshots/emoji_picker.test.js.snap
+++ b/app/components/emoji_picker/snapshots/emoji_picker.test.js.snap
--- a/app/components/error_text/snapshots/error_text.test.js.snap
+++ b/app/components/error_text/snapshots/error_text.test.js.snap
@@ -3,18 +3,18 @@
 exports[`ErrorText should match snapshot 1`] = `
 <Text
  style={
-    [
-      {
+    Array [
+      Object {
        "color": "red",
        "fontSize": 12,
        "marginBottom": 15,
        "marginTop": 15,
        "textAlign": "left",
      },
-      {
+      Object {
        "color": "#d24b4e",
      },
-      {
+      Object {
        "fontSize": 14,
        "marginHorizontal": 15,
      },
--- a/app/components/global_threads/thread_footer/snapshots/thread_footer.test.tsx.snap
+++ b/app/components/global_threads/thread_footer/snapshots/thread_footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Global Thread Footer Should render for channel view and unfollow the thread on press 1`] = `
 <View
  style={
-    {
+    Object {
      "alignItems": "center",
      "flexDirection": "row",
      "minHeight": 40,
@@ -12,20 +12,20 @@ exports[`Global Thread Footer Should render for channel view and unfollow the th
 >
  <Connect(Avatars)
    style={
-      {
+      Object {
        "marginRight": 12,
        "paddingVertical": 8,
      }
    }
    userIds={
-      [
+      Array [
        "user2",
      ]
    }
  />
  <View
    style={
-      {
+      Object {
        "marginRight": 5,
        "top": -1,
      }
@@ -39,7 +39,7 @@ exports[`Global Thread Footer Should render for channel view and unfollow the th
  </View>
  <Text
    style={
-      {
+      Object {
        "alignSelf": "center",
        "color": "rgba(63,67,80,0.64)",
        "fontSize": 12,
@@ -54,7 +54,7 @@ exports[`Global Thread Footer Should render for channel view and unfollow the th
  <TouchableOpacity
    onPress={[Function]}
    style={
-      {
+      Object {
        "backgroundColor": "rgba(28,88,217,0.08)",
        "borderRadius": 4,
        "height": 32,
@@ -66,7 +66,7 @@ exports[`Global Thread Footer Should render for channel view and unfollow the th
  >
    <Text
      style={
-        {
+        Object {
          "color": "#1c58d9",
          "fontSize": 12,
          "fontWeight": "600",
@@ -82,7 +82,7 @@ exports[`Global Thread Footer Should render for channel view and unfollow the th
 exports[`Global Thread Footer Should render for global threads view 1`] = `
 <View
  style={
-    {
+    Object {
      "alignItems": "center",
      "flexDirection": "row",
      "minHeight": 40,
@@ -91,13 +91,13 @@ exports[`Global Thread Footer Should render for global threads view 1`] = `
 >
  <Connect(Avatars)
    style={
-      {
+      Object {
        "marginRight": 12,
        "paddingVertical": 8,
      }
    }
    userIds={
-      [
+      Array [
        "user1",
        "user2",
      ]
@@ -105,7 +105,7 @@ exports[`Global Thread Footer Should render for global threads view 1`] = `
  />
  <Text
    style={
-      {
+      Object {
        "alignSelf": "center",
        "color": "#5d89ea",
        "fontSize": 12,
--- a/app/components/global_threads/thread_item/snapshots/thread_item.test.tsx.snap
+++ b/app/components/global_threads/thread_item/snapshots/thread_item.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
 >
  <View
    style={
-      {
+      Object {
        "borderBottomColor": "rgba(63,67,80,0.08)",
        "borderBottomWidth": 1,
        "flex": 1,
@@ -21,7 +21,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
  >
    <View
      style={
-        {
+        Object {
          "marginTop": 3,
          "width": 32,
        }
@@ -29,7 +29,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
    >
      <View
        style={
-          {
+          Object {
            "alignSelf": "center",
            "backgroundColor": "#5d89ea",
            "borderRadius": 4,
@@ -43,14 +43,14 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
        }
      }
    >
      <View
        style={
-          {
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -60,7 +60,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
      >
        <View
          style={
-            {
+            Object {
              "alignItems": "center",
              "flex": 1,
              "flexDirection": "row",
@@ -72,7 +72,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
          <Text
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
                "fontWeight": "600",
@@ -83,7 +83,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
          />
          <View
            style={
-              {
+              Object {
                "backgroundColor": "rgba(63,67,80,0.08)",
                "borderRadius": 4,
                "maxWidth": "50%",
@@ -93,7 +93,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
            <Text
              numberOfLines={1}
              style={
-                {
+                Object {
                  "color": "#3f4350",
                  "fontSize": 10,
                  "fontWeight": "600",
@@ -113,7 +113,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
        </View>
        <InjectIntl(FriendlyDate)
          style={
-            {
+            Object {
              "color": "rgba(63,67,80,0.64)",
              "fontSize": 12,
              "fontWeight": "400",
@@ -124,7 +124,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
      <Text
        numberOfLines={2}
        style={
-          {
+          Object {
            "color": "#3f4350",
            "fontSize": 15,
            "lineHeight": 20,
@@ -139,7 +139,7 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
        location="GlobalThreads"
        testID="thread_item.post1.footer"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -168,13 +168,13 @@ exports[`Global Thread Item Should render thread item with unread messages dot 1
          }
        }
        thread={
-          {
+          Object {
            "id": "post1",
            "unread_replies": 5,
          }
        }
        threadStarter={
-          {
+          Object {
            "id": "user1",
          }
        }
@@ -193,7 +193,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "borderBottomColor": "rgba(63,67,80,0.08)",
        "borderBottomWidth": 1,
        "flex": 1,
@@ -205,7 +205,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "marginTop": 3,
          "width": 32,
        }
@@ -213,7 +213,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "alignSelf": "center",
            "backgroundColor": "#1e325c",
            "borderRadius": 9,
@@ -225,7 +225,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
      >
        <Text
          style={
-            {
+            Object {
              "alignSelf": "center",
              "color": "#ffffff",
              "fontFamily": "Open Sans",
@@ -241,14 +241,14 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
        }
      }
    >
      <View
        style={
-          {
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -258,7 +258,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
      >
        <View
          style={
-            {
+            Object {
              "alignItems": "center",
              "flex": 1,
              "flexDirection": "row",
@@ -270,7 +270,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
          <Text
            numberOfLines={1}
            style={
-              {
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
                "fontWeight": "600",
@@ -281,7 +281,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
          />
          <View
            style={
-              {
+              Object {
                "backgroundColor": "rgba(63,67,80,0.08)",
                "borderRadius": 4,
                "maxWidth": "50%",
@@ -291,7 +291,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
            <Text
              numberOfLines={1}
              style={
-                {
+                Object {
                  "color": "#3f4350",
                  "fontSize": 10,
                  "fontWeight": "600",
@@ -311,7 +311,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
        </View>
        <InjectIntl(FriendlyDate)
          style={
-            {
+            Object {
              "color": "rgba(63,67,80,0.64)",
              "fontSize": 12,
              "fontWeight": "400",
@@ -322,7 +322,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
      <Text
        numberOfLines={2}
        style={
-          {
+          Object {
            "color": "#3f4350",
            "fontSize": 15,
            "lineHeight": 20,
@@ -337,7 +337,7 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
        location="GlobalThreads"
        testID="thread_item.post1.footer"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -366,14 +366,14 @@ exports[`Global Thread Item Should show unread mentions count 1`] = `
          }
        }
        thread={
-          {
+          Object {
            "id": "post1",
            "unread_mentions": 5,
            "unread_replies": 5,
          }
        }
        threadStarter={
-          {
+          Object {
            "id": "user1",
          }
        }
--- a/app/components/global_threads/thread_list/snapshots/index.test.tsx.snap
+++ b/app/components/global_threads/thread_list/snapshots/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Global Thread List Should render threads with functional tabs & mark all as read button 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
    }
  }
@@ -12,43 +12,43 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
    haveUnreads={true}
    markAllAsRead={[MockFunction]}
    style={
-      {
-        "borderBottom": {
+      Object {
+        "borderBottom": Object {
          "borderBottomColor": "rgba(63,67,80,0.08)",
          "borderBottomWidth": 1,
        },
-        "container": {
+        "container": Object {
          "flex": 1,
        },
-        "headerContainer": {
+        "headerContainer": Object {
          "alignItems": "center",
          "flexDirection": "row",
        },
-        "listScrollIndicator": {
+        "listScrollIndicator": Object {
          "right": 1,
        },
-        "loadingMoreContainer": {
+        "loadingMoreContainer": Object {
          "paddingVertical": 12,
        },
-        "markAllReadIcon": {
+        "markAllReadIcon": Object {
          "color": "rgba(63,67,80,0.56)",
          "fontSize": 28,
          "lineHeight": 28,
        },
-        "markAllReadIconContainer": {
+        "markAllReadIconContainer": Object {
          "paddingHorizontal": 20,
        },
-        "markAllReadIconDisabled": {
+        "markAllReadIconDisabled": Object {
          "opacity": 0.5,
        },
-        "menuContainer": {
+        "menuContainer": Object {
          "alignItems": "center",
          "flexDirection": "row",
          "flexGrow": 1,
          "marginVertical": 12,
          "paddingLeft": 12,
        },
-        "menuItem": {
+        "menuItem": Object {
          "alignSelf": "center",
          "color": "rgba(63,67,80,0.56)",
          "fontFamily": "Open Sans",
@@ -56,21 +56,21 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
          "fontWeight": "600",
          "lineHeight": 24,
        },
-        "menuItemContainer": {
+        "menuItemContainer": Object {
          "paddingHorizontal": 16,
          "paddingVertical": 8,
        },
-        "menuItemContainerSelected": {
+        "menuItemContainerSelected": Object {
          "backgroundColor": "rgba(28,88,217,0.08)",
          "borderRadius": 4,
        },
-        "menuItemSelected": {
+        "menuItemSelected": Object {
          "color": "#1c58d9",
        },
-        "messagesContainer": {
+        "messagesContainer": Object {
          "flexGrow": 1,
        },
-        "unreadsDot": {
+        "unreadsDot": Object {
          "backgroundColor": "#5d89ea",
          "borderRadius": 3,
          "height": 6,
@@ -92,7 +92,7 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
    onRefresh={[MockFunction]}
    refreshing={false}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -125,8 +125,8 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
      ListEmptyComponent={
        <EmptyState
          intl={
-            {
-              "defaultFormats": {},
+            Object {
+              "defaultFormats": Object {},
              "defaultLocale": "en",
              "formatDate": [Function],
              "formatHTMLMessage": [Function],
@@ -135,8 +135,8 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
              "formatPlural": [Function],
              "formatRelative": [Function],
              "formatTime": [Function],
-              "formats": {},
-              "formatters": {
+              "formats": Object {},
+              "formatters": Object {
                "getDateTimeFormat": [Function],
                "getMessageFormat": [Function],
                "getNumberFormat": [Function],
@@ -144,7 +144,7 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
                "getRelativeFormat": [Function],
              },
              "locale": "en",
-              "messages": {},
+              "messages": Object {},
              "now": [Function],
              "onError": [Function],
              "textComponent": "span",
@@ -156,12 +156,12 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
      }
      ListFooterComponent={null}
      contentContainerStyle={
-        {
+        Object {
          "flexGrow": 1,
        }
      }
      data={
-        [
+        Array [
          "thread1",
        ]
      }
@@ -173,7 +173,7 @@ exports[`Global Thread List Should render threads with functional tabs & mark al
      removeClippedSubviews={true}
      renderItem={[Function]}
      scrollIndicatorInsets={
-        {
+        Object {
          "right": 1,
        }
      }
--- a/app/components/global_threads/thread_list/index.tsx
+++ b/app/components/global_threads/thread_list/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 import React from 'react';
 import {injectIntl, intlShape} from 'react-intl';
-import {FlatList, NativeSyntheticEvent, NativeScrollEvent, Platform, View, ListRenderItemInfo} from 'react-native';
+import {FlatList, NativeSyntheticEvent, NativeScrollEvent, Platform, View} from 'react-native';

 import EmptyState from '@components/global_threads/empty_state';
 import ThreadItem from '@components/global_threads/thread_item';
@@ -44,9 +44,9 @@ function ThreadList({haveUnreads, intl, isLoading, isRefreshing, loadMoreThreads
        loadMoreThreads();
    }, [loadMoreThreads, viewingUnreads]);

-    const keyExtractor = React.useCallback((item: string) => item, []);
+    const keyExtractor = React.useCallback((item) => item, []);

-    const renderPost = React.useCallback(({item}: ListRenderItemInfo<string>) => {
+    const renderPost = React.useCallback(({item}) => {
        return (
            <ThreadItem
                testID={testID}
--- a/app/components/global_threads/thread_list/thread_list_header/snapshots/index.test.tsx.snap
+++ b/app/components/global_threads/thread_list/thread_list_header/snapshots/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Global Thread List Header Should render threads with functional tabs & mark all as read button 1`] = `
 <View
  style={
-    [
+    Array [
      undefined,
      undefined,
    ]
@@ -16,7 +16,7 @@ exports[`Global Thread List Header Should render threads with functional tabs &
    >
      <View
        style={
-          [
+          Array [
            undefined,
            undefined,
          ]
@@ -24,9 +24,9 @@ exports[`Global Thread List Header Should render threads with functional tabs &
      >
        <Text
          style={
-            [
+            Array [
              undefined,
-              {},
+              Object {},
            ]
          }
        >
@@ -40,7 +40,7 @@ exports[`Global Thread List Header Should render threads with functional tabs &
    >
      <View
        style={
-          [
+          Array [
            undefined,
            undefined,
          ]
@@ -49,7 +49,7 @@ exports[`Global Thread List Header Should render threads with functional tabs &
        <View>
          <Text
            style={
-              [
+              Array [
                undefined,
                undefined,
              ]
@@ -73,7 +73,7 @@ exports[`Global Thread List Header Should render threads with functional tabs &
      <Icon
        name="playlist-check"
        style={
-          [
+          Array [
            undefined,
          ]
        }
--- a/app/components/load_more_posts/load_more_posts.js
+++ b/app/components/load_more_posts/load_more_posts.js
@@ -1,10 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
-import {ActivityIndicator, Platform, View} from 'react-native';
+import {ActivityIndicator, Platform, View, ViewPropTypes} from 'react-native';

 import FormattedText from '@components/formatted_text';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
--- a/app/components/loading.js
+++ b/app/components/loading.js
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {
    ActivityIndicator,
    StyleSheet,
    View,
+    ViewPropTypes,
 } from 'react-native';

 export default class Loading extends PureComponent {
--- a/app/components/markdown/snapshots/markdown.test.js.snap
+++ b/app/components/markdown/snapshots/markdown.test.js.snap
@@ -2,7 +2,7 @@

 exports[`Markdown should match snapshot 1`] = `
 <Unknown
-  context={[]}
+  context={Array []}
  first={true}
  last={true}
  literal={null}
@@ -10,7 +10,7 @@ exports[`Markdown should match snapshot 1`] = `
 >
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -19,7 +19,7 @@ exports[`Markdown should match snapshot 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
        "mention_highlight",
      ]
@@ -30,7 +30,7 @@ exports[`Markdown should match snapshot 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "mention_highlight",
          "at_mention",
@@ -45,7 +45,7 @@ exports[`Markdown should match snapshot 1`] = `

 exports[`Markdown should match with disableAtChannelMentionHighlight 1`] = `
 <Unknown
-  context={[]}
+  context={Array []}
  first={true}
  last={true}
  literal={null}
@@ -53,7 +53,7 @@ exports[`Markdown should match with disableAtChannelMentionHighlight 1`] = `
 >
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -62,7 +62,7 @@ exports[`Markdown should match with disableAtChannelMentionHighlight 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
        "mention_highlight",
      ]
@@ -73,7 +73,7 @@ exports[`Markdown should match with disableAtChannelMentionHighlight 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "mention_highlight",
          "at_mention",
--- a/app/components/markdown/hashtag/snapshots/index.test.js.snap
+++ b/app/components/markdown/hashtag/snapshots/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`Hashtag should match snapshot 1`] = `
 <Text
  onPress={[Function]}
  style={
-    {
+    Object {
      "color": "red",
    }
  }
--- a/app/components/markdown/latex_code_block/snapshots/latex_code_block.test.js.snap
+++ b/app/components/markdown/latex_code_block/snapshots/latex_code_block.test.js.snap
@@ -8,7 +8,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "borderColor": "rgba(63,67,80,0.15)",
        "borderRadius": 3,
        "borderWidth": 0.5,
@@ -19,7 +19,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "paddingLeft": 6,
@@ -29,7 +29,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "flexDirection": "row",
            "justifyContent": "flex-start",
            "marginLeft": 5,
@@ -39,7 +39,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
      >
        <ForwardRef
          color="black"
-          math="\\frac{2}{1} = 2"
+          math="\\\\frac{2}{1} = 2"
          onError={[Function]}
          renderError={[Function]}
          resizeMode="cover"
@@ -47,7 +47,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
      </View>
      <View
        style={
-          {
+          Object {
            "flexDirection": "row",
            "justifyContent": "flex-start",
            "marginLeft": 5,
@@ -66,7 +66,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#192a4d",
          "justifyContent": "center",
@@ -80,7 +80,7 @@ exports[`LatexCodeBlock should have 2 lines 1`] = `
    >
      <Text
        style={
-          {
+          Object {
            "color": "#ffffff",
            "fontSize": 12,
          }
@@ -101,7 +101,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "borderColor": "rgba(63,67,80,0.15)",
        "borderRadius": 3,
        "borderWidth": 0.5,
@@ -112,7 +112,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "paddingLeft": 6,
@@ -122,7 +122,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "flexDirection": "row",
            "justifyContent": "flex-start",
            "marginLeft": 5,
@@ -132,7 +132,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
      >
        <ForwardRef
          color="black"
-          math="\\frac{5}{2} = 2"
+          math="\\\\frac{5}{2} = 2"
          onError={[Function]}
          renderError={[Function]}
          resizeMode="cover"
@@ -140,7 +140,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
      </View>
      <View
        style={
-          {
+          Object {
            "flexDirection": "row",
            "justifyContent": "flex-start",
            "marginLeft": 5,
@@ -160,14 +160,14 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
        defaultMessage="+{count, number} more {count, plural, one {line} other {lines}}"
        id="mobile.markdown.code.plusMoreLines"
        style={
-          {
+          Object {
            "color": "rgba(63,67,80,0.4)",
            "fontSize": 11,
            "marginTop": 2,
          }
        }
        values={
-          {
+          Object {
            "count": 1,
          }
        }
@@ -175,7 +175,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#192a4d",
          "justifyContent": "center",
@@ -189,7 +189,7 @@ exports[`LatexCodeBlock should have moreLinesText 1`] = `
    >
      <Text
        style={
-          {
+          Object {
            "color": "#ffffff",
            "fontSize": 12,
          }
@@ -210,7 +210,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "borderColor": "rgba(63,67,80,0.15)",
        "borderRadius": 3,
        "borderWidth": 0.5,
@@ -221,7 +221,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
          "paddingLeft": 6,
@@ -231,7 +231,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "flexDirection": "row",
            "justifyContent": "flex-start",
            "marginLeft": 5,
@@ -241,7 +241,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
      >
        <ForwardRef
          color="black"
-          math="\\frac{1}{2} == 0.5^{0*\\pi} - 0.5"
+          math="\\\\frac{1}{2} == 0.5^{0*\\\\pi} - 0.5"
          onError={[Function]}
          renderError={[Function]}
          resizeMode="cover"
@@ -250,7 +250,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "#192a4d",
          "justifyContent": "center",
@@ -264,7 +264,7 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
    >
      <Text
        style={
-          {
+          Object {
            "color": "#ffffff",
            "fontSize": 12,
          }
--- a/app/components/markdown/latex_inline/snapshots/latex_inline.test.js.snap
+++ b/app/components/markdown/latex_inline/snapshots/latex_inline.test.js.snap
@@ -3,13 +3,13 @@
 exports[`LatexCodeBlock should have maxWidth 10 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "flexDirection": "row",
        "flexWrap": "wrap",
        "marginBottom": -7,
      },
-      {
+      Object {
        "height": undefined,
      },
    ]
@@ -17,16 +17,16 @@ exports[`LatexCodeBlock should have maxWidth 10 1`] = `
 >
  <ForwardRef
    color="black"
-    math="\\frac{1}{2} == 0.5^{0*\\pi} - 0.5"
+    math="\\\\frac{1}{2} == 0.5^{0*\\\\pi} - 0.5"
    onError={[Function]}
    renderError={[Function]}
    resizeMode="contain"
    style={
-      [
-        {
+      Array [
+        Object {
          "marginBottom": -7,
        },
-        {
+        Object {
          "maxWidth": 10,
        },
      ]
@@ -38,13 +38,13 @@ exports[`LatexCodeBlock should have maxWidth 10 1`] = `
 exports[`LatexCodeBlock should match snapshot 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "flexDirection": "row",
        "flexWrap": "wrap",
        "marginBottom": -7,
      },
-      {
+      Object {
        "height": undefined,
      },
    ]
@@ -52,16 +52,16 @@ exports[`LatexCodeBlock should match snapshot 1`] = `
 >
  <ForwardRef
    color="black"
-    math="\\frac{1}{2} == 0.5^{0*\\pi} - 0.5"
+    math="\\\\frac{1}{2} == 0.5^{0*\\\\pi} - 0.5"
    onError={[Function]}
    renderError={[Function]}
    resizeMode="contain"
    style={
-      [
-        {
+      Array [
+        Object {
          "marginBottom": -7,
        },
-        {
+        Object {
          "maxWidth": "100%",
        },
      ]
--- a/app/components/markdown/markdown_emoji/snapshots/markdown_emoji.test.js.snap
+++ b/app/components/markdown/markdown_emoji/snapshots/markdown_emoji.test.js.snap
@@ -2,7 +2,7 @@

 exports[`MarkdownEmoji should match snapshot 1`] = `
 <Unknown
-  context={[]}
+  context={Array []}
  first={true}
  last={true}
  literal={null}
@@ -10,7 +10,7 @@ exports[`MarkdownEmoji should match snapshot 1`] = `
 >
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -20,7 +20,7 @@ exports[`MarkdownEmoji should match snapshot 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
@@ -34,7 +34,7 @@ exports[`MarkdownEmoji should match snapshot 1`] = `

 exports[`MarkdownEmoji should render with hardbreaks 1`] = `
 <Unknown
-  context={[]}
+  context={Array []}
  first={true}
  last={true}
  literal={null}
@@ -42,7 +42,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
 >
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -52,7 +52,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
@@ -63,7 +63,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  </Unknown>
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -72,7 +72,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -82,7 +82,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
@@ -93,7 +93,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  </Unknown>
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -102,7 +102,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -111,7 +111,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -121,7 +121,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
@@ -132,7 +132,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  </Unknown>
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -141,7 +141,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -151,7 +151,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
@@ -162,7 +162,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  </Unknown>
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -171,7 +171,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  />
  <Unknown
    context={
-      [
+      Array [
        "paragraph",
      ]
    }
@@ -181,7 +181,7 @@ exports[`MarkdownEmoji should render with hardbreaks 1`] = `
  >
    <Unknown
      context={
-        [
+        Array [
          "paragraph",
          "emoji",
        ]
--- a/app/components/markdown/markdown_table/snapshots/markdown_table.test.js.snap
+++ b/app/components/markdown/markdown_table/snapshots/markdown_table.test.js.snap
@@ -4,7 +4,7 @@ exports[`MarkdownTable should match snapshot 1`] = `
 <TouchableWithFeedbackIOS
  onPress={[Function]}
  style={
-    {
+    Object {
      "paddingRight": 10,
    }
  }
@@ -17,20 +17,20 @@ exports[`MarkdownTable should match snapshot 1`] = `
    scrollEnabled={false}
    showsVerticalScrollIndicator={false}
    style={
-      {
+      Object {
        "maxHeight": 300,
      }
    }
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "borderColor": "rgba(63,67,80,0.2)",
            "borderWidth": 1,
            "width": "100%",
          },
-          {
+          Object {
            "width": 672,
          },
        ]
@@ -217,26 +217,26 @@ exports[`MarkdownTable should match snapshot 1`] = `
  </ScrollView>
  <LinearGradient
    colors={
-      [
+      Array [
        "rgba(63,67,80,0)",
        "rgba(63,67,80,0.1)",
      ]
    }
    end={
-      {
+      Object {
        "x": 1,
        "y": 0,
      }
    }
    start={
-      {
+      Object {
        "x": 0,
        "y": 0,
      }
    }
    style={
-      [
-        {
+      Array [
+        Object {
          "borderColor": "rgba(63,67,80,0.2)",
          "borderRightWidth": 1,
          "maxHeight": 300,
@@ -244,7 +244,7 @@ exports[`MarkdownTable should match snapshot 1`] = `
          "top": 0,
          "width": 20,
        },
-        {
+        Object {
          "height": 0,
          "left": -20,
        },
@@ -253,33 +253,33 @@ exports[`MarkdownTable should match snapshot 1`] = `
  />
  <LinearGradient
    colors={
-      [
+      Array [
        "rgba(63,67,80,0)",
        "rgba(63,67,80,0.1)",
      ]
    }
    end={
-      {
+      Object {
        "x": 0.5,
        "y": 1,
      }
    }
    start={
-      {
+      Object {
        "x": 0.5,
        "y": 0,
      }
    }
    style={
-      [
-        {
+      Array [
+        Object {
          "borderColor": "rgba(63,67,80,0.2)",
          "bottom": 34,
          "height": 20,
          "left": 0,
          "position": "absolute",
        },
-        {
+        Object {
          "width": 0,
        },
      ]
--- a/app/components/markdown/markdown_table_image/markdown_table_image.tsx
+++ b/app/components/markdown/markdown_table_image/markdown_table_image.tsx
@@ -114,6 +114,8 @@ const MarkTableImage = ({disable, imagesMetadata, postId, serverURL, source, the
                        style={styles.container}
                        width={width}
                        height={height}
+
+                        //@ts-expect-error onError not defined in the types
                        onError={onLoadFailed}
                    />
                </View>
--- a/app/components/markdown/transform.test.js
+++ b/app/components/markdown/transform.test.js
@@ -3100,6 +3100,50 @@ function nodeToString(node) {
    return out;
 }

+const ignoredKeys = {_sourcepos: true, _lastLineBlank: true, _open: true, _string_content: true, _info: true, _isFenced: true, _fenceChar: true, _fenceLength: true, _fenceOffset: true, _onEnter: true, _onExit: true};
+function astToJson(node, visited = [], indent = '') {
+    let out = '{';
+
+    const myVisited = [...visited];
+    myVisited.push(node);
+
+    const keys = Object.keys(node).filter((key) => !ignoredKeys[key]);
+    if (keys.length > 0) {
+        out += '\n';
+    }
+
+    for (const [i, key] of keys.entries()) {
+        out += indent + '  "' + key + '":';
+
+        const value = node[key];
+        if (myVisited.indexOf(value) !== -1) {
+            out += '[Circular]';
+        } else if (value === null) {
+            out += 'null';
+        } else if (typeof value === 'number') {
+            out += value;
+        } else if (typeof value === 'string') {
+            out += '"' + value + '"';
+        } else if (typeof value === 'boolean') {
+            out += String(value);
+        } else if (typeof value === 'object') {
+            out += astToJson(value, myVisited, indent + '  '); // eslint-disable-line @typescript-eslint/no-unused-vars
+        }
+
+        if (i !== keys.length - 1) {
+            out += ',\n';
+        }
+    }
+
+    if (keys.length > 0) {
+        out += '\n' + indent;
+    }
+
+    out += '}';
+
+    return out;
+}
+
 // Converts an AST represented as a JavaScript object into a full Commonmark-compatitle AST.
 // This function is intended for use while testing. An example of input would be:
 // {
--- a/app/components/post_draft/snapshots/post_draft.test.js.snap
+++ b/app/components/post_draft/snapshots/post_draft.test.js.snap
@@ -3,7 +3,7 @@
 exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
 <View
  style={
-    {
+    Object {
      "backgroundColor": "#ffffff",
      "borderTopColor": "rgba(63,67,80,0.2)",
      "borderTopWidth": 1,
@@ -18,12 +18,12 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
          ],
        ]
@@ -33,14 +33,14 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
    </Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
-            {
+            Object {
              "fontWeight": "bold",
            },
          ],
@@ -51,12 +51,12 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
    </Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
          ],
        ]
@@ -78,7 +78,7 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
    onResponderTerminationRequest={[Function]}
    onStartShouldSetResponder={[Function]}
    style={
-      {
+      Object {
        "alignItems": "center",
        "backgroundColor": "#1c58d9",
        "borderRadius": 4,
@@ -92,7 +92,7 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
  >
    <Text
      style={
-        {
+        Object {
          "color": "white",
          "fontWeight": "bold",
          "marginTop": 7,
@@ -108,7 +108,7 @@ exports[`PostDraft Should render the Archived for channelIsArchived 1`] = `
 exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
 <View
  style={
-    {
+    Object {
      "backgroundColor": "#ffffff",
      "borderTopColor": "rgba(63,67,80,0.2)",
      "borderTopWidth": 1,
@@ -123,12 +123,12 @@ exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
          ],
        ]
@@ -138,14 +138,14 @@ exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
    </Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
-            {
+            Object {
              "fontWeight": "bold",
            },
          ],
@@ -156,12 +156,12 @@ exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
    </Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "#3f4350",
            "textAlign": "center",
          },
-          [
+          Array [
            undefined,
          ],
        ]
@@ -183,7 +183,7 @@ exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
    onResponderTerminationRequest={[Function]}
    onStartShouldSetResponder={[Function]}
    style={
-      {
+      Object {
        "alignItems": "center",
        "backgroundColor": "#1c58d9",
        "borderRadius": 4,
@@ -197,7 +197,7 @@ exports[`PostDraft Should render the Archived for deactivatedChannel 1`] = `
  >
    <Text
      style={
-        {
+        Object {
          "color": "white",
          "fontWeight": "bold",
          "marginTop": 7,
@@ -217,7 +217,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
  <View
    collapsable={false}
    style={
-      {
+      Object {
        "bottom": 0,
      }
    }
@@ -226,7 +226,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
      ellipsizeMode="tail"
      numberOfLines={1}
      style={
-        {
+        Object {
          "backgroundColor": "transparent",
          "color": "#3f4350",
          "fontSize": 11,
@@ -240,14 +240,14 @@ exports[`PostDraft Should render the DraftInput 1`] = `
  </View>
  <RNCSafeAreaView
    edges={
-      [
+      Array [
        "left",
        "right",
      ]
    }
    onLayout={[Function]}
    style={
-      {
+      Object {
        "alignItems": "flex-end",
        "backgroundColor": "#ffffff",
        "borderTopColor": "rgba(63,67,80,0.2)",
@@ -261,7 +261,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
  >
    <RCTScrollView
      contentContainerStyle={
-        {
+        Object {
          "alignItems": "stretch",
          "paddingTop": 7,
        }
@@ -274,7 +274,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      style={
-        {
+        Object {
          "flex": 1,
          "flexDirection": "column",
        }
@@ -289,7 +289,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          blurOnSubmit={false}
          disableCopyPaste={false}
          disableFullscreenUI={true}
-          focusable={false}
+          focusable={true}
          keyboardAppearance="light"
          keyboardType="default"
          mostRecentEventCount={0}
@@ -315,8 +315,8 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          placeholderTextColor="rgba(63,67,80,0.5)"
          screenId="NavigationScreen1"
          style={
-            [
-              {
+            Array [
+              Object {
                "color": "#3f4350",
                "fontSize": 15,
                "lineHeight": 20,
@@ -334,7 +334,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
        />
        <View
          style={
-            {
+            Object {
              "display": "flex",
              "flexDirection": "column",
            }
@@ -345,7 +345,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            forwardedRef={[Function]}
            isInteraction={true}
            style={
-              {
+              Object {
                "display": "flex",
                "flexDirection": "row",
                "height": 0,
@@ -355,7 +355,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          >
            <RCTScrollView
              contentContainerStyle={
-                {
+                Object {
                  "alignItems": "flex-end",
                  "paddingRight": 12,
                }
@@ -363,7 +363,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              horizontal={true}
              keyboardShouldPersistTaps="handled"
              style={
-                {
+                Object {
                  "flex": 1,
                }
              }
@@ -376,14 +376,14 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            forwardedRef={[Function]}
            isInteraction={true}
            style={
-              {
+              Object {
                "height": 0,
              }
            }
          >
            <View
              style={
-                {
+                Object {
                  "flex": 1,
                  "marginHorizontal": 12,
                  "marginTop": 4,
@@ -394,7 +394,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
        </View>
        <View
          style={
-            {
+            Object {
              "alignItems": "center",
              "display": "flex",
              "flexDirection": "row",
@@ -405,7 +405,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
        >
          <View
            style={
-              {
+              Object {
                "display": "flex",
                "flexDirection": "row",
                "height": 44,
@@ -415,7 +415,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          >
            <View
              accessibilityState={
-                {
+                Object {
                  "disabled": false,
                }
              }
@@ -430,7 +430,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
-                {
+                Object {
                  "alignItems": "center",
                  "justifyContent": "center",
                  "opacity": 1,
@@ -447,7 +447,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            </View>
            <View
              accessibilityState={
-                {
+                Object {
                  "disabled": false,
                }
              }
@@ -462,7 +462,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
-                {
+                Object {
                  "alignItems": "center",
                  "justifyContent": "center",
                  "opacity": 1,
@@ -479,7 +479,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            </View>
            <View
              accessibilityState={
-                {
+                Object {
                  "disabled": false,
                }
              }
@@ -494,7 +494,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
-                {
+                Object {
                  "alignItems": "center",
                  "justifyContent": "center",
                  "opacity": 1,
@@ -511,7 +511,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            </View>
            <View
              accessibilityState={
-                {
+                Object {
                  "disabled": false,
                }
              }
@@ -526,7 +526,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
-                {
+                Object {
                  "alignItems": "center",
                  "justifyContent": "center",
                  "opacity": 1,
@@ -543,7 +543,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
            </View>
            <View
              accessibilityState={
-                {
+                Object {
                  "disabled": false,
                }
              }
@@ -558,7 +558,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
-                {
+                Object {
                  "alignItems": "center",
                  "justifyContent": "center",
                  "opacity": 1,
@@ -576,7 +576,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          </View>
          <View
            style={
-              {
+              Object {
                "justifyContent": "flex-end",
                "paddingRight": 8,
              }
@@ -585,8 +585,8 @@ exports[`PostDraft Should render the DraftInput 1`] = `
          >
            <View
              style={
-                [
-                  {
+                Array [
+                  Object {
                    "alignItems": "center",
                    "backgroundColor": "#1c58d9",
                    "borderRadius": 4,
@@ -594,7 +594,7 @@ exports[`PostDraft Should render the DraftInput 1`] = `
                    "justifyContent": "center",
                    "width": 80,
                  },
-                  {
+                  Object {
                    "backgroundColor": "rgba(28,88,217,0.3)",
                  },
                ]
@@ -617,19 +617,19 @@ exports[`PostDraft Should render the DraftInput 1`] = `
 exports[`PostDraft Should render the ReadOnly for canPost 1`] = `
 <RNCSafeAreaView
  edges={
-    [
+    Array [
      "bottom",
    ]
  }
  style={
-    {
+    Object {
      "backgroundColor": "rgba(63,67,80,0.04)",
    }
  }
 >
  <View
    style={
-      {
+      Object {
        "alignItems": "center",
        "borderTopColor": "rgba(63,67,80,0.2)",
        "borderTopWidth": 1,
@@ -644,7 +644,7 @@ exports[`PostDraft Should render the ReadOnly for canPost 1`] = `
      color="#3f4350"
      name="glasses"
      style={
-        {
+        Object {
          "fontSize": 20,
          "lineHeight": 22,
          "opacity": 0.56,
@@ -653,7 +653,7 @@ exports[`PostDraft Should render the ReadOnly for canPost 1`] = `
    />
    <Text
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 15,
          "lineHeight": 20,
@@ -671,19 +671,19 @@ exports[`PostDraft Should render the ReadOnly for canPost 1`] = `
 exports[`PostDraft Should render the ReadOnly for channelIsReadOnly 1`] = `
 <RNCSafeAreaView
  edges={
-    [
+    Array [
      "bottom",
    ]
  }
  style={
-    {
+    Object {
      "backgroundColor": "rgba(63,67,80,0.04)",
    }
  }
 >
  <View
    style={
-      {
+      Object {
        "alignItems": "center",
        "borderTopColor": "rgba(63,67,80,0.2)",
        "borderTopWidth": 1,
@@ -698,7 +698,7 @@ exports[`PostDraft Should render the ReadOnly for channelIsReadOnly 1`] = `
      color="#3f4350"
      name="glasses"
      style={
-        {
+        Object {
          "fontSize": 20,
          "lineHeight": 22,
          "opacity": 0.56,
@@ -707,7 +707,7 @@ exports[`PostDraft Should render the ReadOnly for channelIsReadOnly 1`] = `
    />
    <Text
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 15,
          "lineHeight": 20,
--- a/app/components/post_draft/archived/snapshots/archived.test.js.snap
+++ b/app/components/post_draft/archived/snapshots/archived.test.js.snap
@@ -4,8 +4,8 @@ exports[`PostDraft Archived should match snapshot 1`] = `
 <Connect(Archived)
  deactivated={false}
  intl={
-    {
-      "defaultFormats": {},
+    Object {
+      "defaultFormats": Object {},
      "defaultLocale": "en",
      "formatDate": [Function],
      "formatHTMLMessage": [Function],
@@ -14,8 +14,8 @@ exports[`PostDraft Archived should match snapshot 1`] = `
      "formatPlural": [Function],
      "formatRelative": [Function],
      "formatTime": [Function],
-      "formats": {},
-      "formatters": {
+      "formats": Object {},
+      "formatters": Object {
        "getDateTimeFormat": [Function],
        "getMessageFormat": [Function],
        "getNumberFormat": [Function],
@@ -23,7 +23,7 @@ exports[`PostDraft Archived should match snapshot 1`] = `
        "getRelativeFormat": [Function],
      },
      "locale": "en",
-      "messages": {},
+      "messages": Object {},
      "now": [Function],
      "onError": [Function],
      "textComponent": "span",
@@ -36,7 +36,7 @@ exports[`PostDraft Archived should match snapshot 1`] = `
  teamId="team-id"
  testID="post_draft.archived"
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
--- a/app/components/post_draft/post_input/snapshots/post_input.test.js.snap
+++ b/app/components/post_draft/post_input/snapshots/post_input.test.js.snap
@@ -20,7 +20,7 @@ exports[`PostInput should match, full snapshot 1`] = `
  placeholderTextColor="rgba(63,67,80,0.5)"
  screenId="Channel"
  style={
-    {
+    Object {
      "color": "#3f4350",
      "fontSize": 15,
      "lineHeight": 20,
--- a/app/components/post_draft/quick_actions/snapshots/quick_actions.test.js.snap
+++ b/app/components/post_draft/quick_actions/snapshots/quick_actions.test.js.snap
@@ -3,7 +3,7 @@
 exports[`QuickActions should match snapshot 1`] = `
 <View
  style={
-    {
+    Object {
      "display": "flex",
      "flexDirection": "row",
      "height": 44,
@@ -17,7 +17,7 @@ exports[`QuickActions should match snapshot 1`] = `
    onTextChange={[Function]}
    testID="post_draft.quick_actions.at_input_action"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -53,7 +53,7 @@ exports[`QuickActions should match snapshot 1`] = `
    onTextChange={[Function]}
    testID="post_draft.quick_actions.slash_input_action"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -90,7 +90,7 @@ exports[`QuickActions should match snapshot 1`] = `
    onUploadFiles={[Function]}
    testID="post_draft.quick_actions.file_action"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -126,7 +126,7 @@ exports[`QuickActions should match snapshot 1`] = `
    onUploadFiles={[Function]}
    testID="post_draft.quick_actions.image_action"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -162,7 +162,7 @@ exports[`QuickActions should match snapshot 1`] = `
    onUploadFiles={[Function]}
    testID="post_draft.quick_actions.camera_action"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
--- a/app/components/post_draft/quick_actions/camera_quick_action/snapshots/camera_quick_action.test.js.snap
+++ b/app/components/post_draft/quick_actions/camera_quick_action/snapshots/camera_quick_action.test.js.snap
@@ -3,7 +3,7 @@
 exports[`CameraButton should match snapshot 1`] = `
 <View
  accessibilityState={
-    {
+    Object {
      "disabled": false,
    }
  }
@@ -18,7 +18,7 @@ exports[`CameraButton should match snapshot 1`] = `
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
-    {
+    Object {
      "alignItems": "center",
      "justifyContent": "center",
      "opacity": 1,
--- a/app/components/post_draft/quick_actions/file_quick_action/snapshots/file_quick_action.test.js.snap
+++ b/app/components/post_draft/quick_actions/file_quick_action/snapshots/file_quick_action.test.js.snap
@@ -3,7 +3,7 @@
 exports[`FileQuickAction should match snapshot 1`] = `
 <View
  accessibilityState={
-    {
+    Object {
      "disabled": false,
    }
  }
@@ -18,7 +18,7 @@ exports[`FileQuickAction should match snapshot 1`] = `
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
-    {
+    Object {
      "alignItems": "center",
      "justifyContent": "center",
      "opacity": 1,
--- a/app/components/post_draft/quick_actions/image_quick_action/snapshots/image_quick_action.test.js.snap
+++ b/app/components/post_draft/quick_actions/image_quick_action/snapshots/image_quick_action.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ImageQuickAction should match snapshot 1`] = `
 <View
  accessibilityState={
-    {
+    Object {
      "disabled": false,
    }
  }
@@ -18,7 +18,7 @@ exports[`ImageQuickAction should match snapshot 1`] = `
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
-    {
+    Object {
      "alignItems": "center",
      "justifyContent": "center",
      "opacity": 1,
--- a/app/components/post_draft/quick_actions/input_quick_action/snapshots/input_quick_action.test.js.snap
+++ b/app/components/post_draft/quick_actions/input_quick_action/snapshots/input_quick_action.test.js.snap
@@ -5,7 +5,7 @@ exports[`InputQuickAction should match snapshot 1`] = `
  disabled={false}
  onPress={[Function]}
  style={
-    {
+    Object {
      "alignItems": "center",
      "justifyContent": "center",
      "padding": 10,
--- a/app/components/post_draft/read_only/snapshots/read_only.test.js.snap
+++ b/app/components/post_draft/read_only/snapshots/read_only.test.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`PostDraft ReadOnly should match snapshot 1`] = `
-<ForwardRef
+<RNCSafeAreaView
  edges={
-    [
+    Array [
      "bottom",
    ]
  }
  style={
-    {
+    Object {
      "backgroundColor": "rgba(63,67,80,0.04)",
    }
  }
 >
  <View
    style={
-      {
+      Object {
        "alignItems": "center",
        "borderTopColor": "rgba(63,67,80,0.2)",
        "borderTopWidth": 1,
@@ -30,7 +30,7 @@ exports[`PostDraft ReadOnly should match snapshot 1`] = `
      color="#3f4350"
      name="glasses"
      style={
-        {
+        Object {
          "fontSize": 20,
          "lineHeight": 22,
          "opacity": 0.56,
@@ -41,7 +41,7 @@ exports[`PostDraft ReadOnly should match snapshot 1`] = `
      defaultMessage="This channel is read-only."
      id="mobile.create_post.read_only"
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 15,
          "lineHeight": 20,
@@ -51,5 +51,5 @@ exports[`PostDraft ReadOnly should match snapshot 1`] = `
      }
    />
  </View>
-</ForwardRef>
+</RNCSafeAreaView>
 `;
--- a/app/components/post_draft/send_action/snapshots/send.test.js.snap
+++ b/app/components/post_draft/send_action/snapshots/send.test.js.snap
@@ -3,7 +3,7 @@
 exports[`SendAction should change theme backgroundColor to 0.3 opacity 1`] = `
 <View
  style={
-    {
+    Object {
      "justifyContent": "flex-end",
      "paddingRight": 8,
    }
@@ -12,8 +12,8 @@ exports[`SendAction should change theme backgroundColor to 0.3 opacity 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "alignItems": "center",
          "backgroundColor": "#1c58d9",
          "borderRadius": 4,
@@ -21,7 +21,7 @@ exports[`SendAction should change theme backgroundColor to 0.3 opacity 1`] = `
          "justifyContent": "center",
          "width": 80,
        },
-        {
+        Object {
          "backgroundColor": "rgba(28,88,217,0.3)",
        },
      ]
@@ -40,7 +40,7 @@ exports[`SendAction should match snapshot 1`] = `
 <TouchableWithFeedbackIOS
  onPress={[MockFunction]}
  style={
-    {
+    Object {
      "justifyContent": "flex-end",
      "paddingRight": 8,
    }
@@ -50,7 +50,7 @@ exports[`SendAction should match snapshot 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "alignItems": "center",
        "backgroundColor": "#1c58d9",
        "borderRadius": 4,
@@ -73,7 +73,7 @@ exports[`SendAction should render theme backgroundColor 1`] = `
 <TouchableWithFeedbackIOS
  onPress={[MockFunction]}
  style={
-    {
+    Object {
      "justifyContent": "flex-end",
      "paddingRight": 8,
    }
@@ -83,7 +83,7 @@ exports[`SendAction should render theme backgroundColor 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "alignItems": "center",
        "backgroundColor": "#1c58d9",
        "borderRadius": 4,
--- a/app/components/post_draft/uploads/upload_item/snapshots/upload_item.test.js.snap
+++ b/app/components/post_draft/uploads/upload_item/snapshots/upload_item.test.js.snap
@@ -3,7 +3,7 @@
 exports[`UploadItem downloadAndUploadFile should match, full snapshot 1`] = `
 <View
  style={
-    {
+    Object {
      "marginLeft": 12,
      "paddingTop": 5,
    }
@@ -11,7 +11,7 @@ exports[`UploadItem downloadAndUploadFile should match, full snapshot 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "borderRadius": 4,
        "height": 56,
        "width": 56,
@@ -23,7 +23,7 @@ exports[`UploadItem downloadAndUploadFile should match, full snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "height": 56,
            "width": 56,
          }
@@ -32,13 +32,13 @@ exports[`UploadItem downloadAndUploadFile should match, full snapshot 1`] = `
        <FileIcon
          backgroundColor="rgba(63,67,80,0.08)"
          file={
-            {
+            Object {
              "loading": false,
            }
          }
          iconSize={60}
          theme={
-            {
+            Object {
              "awayIndicator": "#ffbc1f",
              "buttonBg": "#1c58d9",
              "buttonColor": "#ffffff",
@@ -74,7 +74,7 @@ exports[`UploadItem downloadAndUploadFile should match, full snapshot 1`] = `
    channelId="channel-id"
    onPress={[Function]}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
--- a/app/components/post_draft/uploads/upload_item/snapshots/upload_remove.test.js.snap
+++ b/app/components/post_draft/uploads/upload_item/snapshots/upload_remove.test.js.snap
@@ -4,7 +4,7 @@ exports[`UploadRemove should match, full snapshot 1`] = `
 <TouchableWithFeedbackIOS
  onPress={[Function]}
  style={
-    {
+    Object {
      "elevation": 11,
      "height": 24,
      "position": "absolute",
@@ -17,7 +17,7 @@ exports[`UploadRemove should match, full snapshot 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "alignSelf": "center",
        "backgroundColor": "#ffffff",
        "borderRadius": 12,
--- a/app/components/post_list/snapshots/post_list.test.js.snap
+++ b/app/components/post_list/snapshots/post_list.test.js.snap
@@ -7,8 +7,8 @@ exports[`PostList should match snapshot 1`] = `
  deepLinkURL=""
  handleSelectChannelByName={[MockFunction]}
  intl={
-    {
-      "defaultFormats": {},
+    Object {
+      "defaultFormats": Object {},
      "defaultLocale": "en",
      "formatDate": [Function],
      "formatHTMLMessage": [Function],
@@ -17,8 +17,8 @@ exports[`PostList should match snapshot 1`] = `
      "formatPlural": [Function],
      "formatRelative": [Function],
      "formatTime": [Function],
-      "formats": {},
-      "formatters": {
+      "formats": Object {},
+      "formatters": Object {
        "getDateTimeFormat": [Function],
        "getMessageFormat": [Function],
        "getNumberFormat": [Function],
@@ -26,7 +26,7 @@ exports[`PostList should match snapshot 1`] = `
        "getRelativeFormat": [Function],
      },
      "locale": "en",
-      "messages": {},
+      "messages": Object {},
      "now": [Function],
      "onError": [Function],
      "textComponent": "span",
@@ -35,7 +35,7 @@ exports[`PostList should match snapshot 1`] = `
  }
  lastPostIndex={-1}
  postIds={
-    [
+    Array [
      "post-id-1",
      "post-id-2",
    ]
@@ -46,7 +46,7 @@ exports[`PostList should match snapshot 1`] = `
  showPermalink={[MockFunction]}
  siteURL="https://site-url.fake"
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
--- a/app/components/post_list/date_separator/snapshots/date_separator.test.js.snap
+++ b/app/components/post_list/date_separator/snapshots/date_separator.test.js.snap
@@ -3,8 +3,8 @@
 exports[`DateHeader component should match snapshot when timezone is UserTimezone automatic 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 28,
@@ -16,7 +16,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -26,7 +26,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
  />
  <View
    style={
-      {
+      Object {
        "marginHorizontal": 15,
      }
    }
@@ -34,8 +34,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
    <RecentDate
      date={1531152392}
      intl={
-        {
-          "defaultFormats": {},
+        Object {
+          "defaultFormats": Object {},
          "defaultLocale": "en",
          "formatDate": [Function],
          "formatHTMLMessage": [Function],
@@ -44,8 +44,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
          "formatPlural": [Function],
          "formatRelative": [Function],
          "formatTime": [Function],
-          "formats": {},
-          "formatters": {
+          "formats": Object {},
+          "formatters": Object {
            "getDateTimeFormat": [Function],
            "getMessageFormat": [Function],
            "getNumberFormat": [Function],
@@ -53,7 +53,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
            "getRelativeFormat": [Function],
          },
          "locale": "en",
-          "messages": {},
+          "messages": Object {},
          "now": [Function],
          "onError": [Function],
          "textComponent": "span",
@@ -61,14 +61,14 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
        }
      }
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 14,
          "fontWeight": "600",
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
@@ -97,7 +97,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
        }
      }
      timezone={
-        {
+        Object {
          "automaticTimezone": "America/New_York",
          "manualTimezone": "America/Santiago",
          "useAutomaticTimezone": true,
@@ -107,7 +107,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
  </View>
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -121,8 +121,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
 exports[`DateHeader component should match snapshot when timezone is UserTimezone manual 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 28,
@@ -134,7 +134,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -144,7 +144,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
  />
  <View
    style={
-      {
+      Object {
        "marginHorizontal": 15,
      }
    }
@@ -152,8 +152,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
    <RecentDate
      date={1531152392}
      intl={
-        {
-          "defaultFormats": {},
+        Object {
+          "defaultFormats": Object {},
          "defaultLocale": "en",
          "formatDate": [Function],
          "formatHTMLMessage": [Function],
@@ -162,8 +162,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
          "formatPlural": [Function],
          "formatRelative": [Function],
          "formatTime": [Function],
-          "formats": {},
-          "formatters": {
+          "formats": Object {},
+          "formatters": Object {
            "getDateTimeFormat": [Function],
            "getMessageFormat": [Function],
            "getNumberFormat": [Function],
@@ -171,7 +171,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
            "getRelativeFormat": [Function],
          },
          "locale": "en",
-          "messages": {},
+          "messages": Object {},
          "now": [Function],
          "onError": [Function],
          "textComponent": "span",
@@ -179,14 +179,14 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
        }
      }
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 14,
          "fontWeight": "600",
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
@@ -215,7 +215,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
        }
      }
      timezone={
-        {
+        Object {
          "automaticTimezone": "America/New_York",
          "manualTimezone": "America/Santiago",
          "useAutomaticTimezone": false,
@@ -225,7 +225,7 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
  </View>
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -239,8 +239,8 @@ exports[`DateHeader component should match snapshot when timezone is UserTimezon
 exports[`DateHeader component should match snapshot when timezone is set 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 28,
@@ -252,7 +252,7 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -262,7 +262,7 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
  />
  <View
    style={
-      {
+      Object {
        "marginHorizontal": 15,
      }
    }
@@ -270,8 +270,8 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
    <RecentDate
      date={1531152392}
      intl={
-        {
-          "defaultFormats": {},
+        Object {
+          "defaultFormats": Object {},
          "defaultLocale": "en",
          "formatDate": [Function],
          "formatHTMLMessage": [Function],
@@ -280,8 +280,8 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
          "formatPlural": [Function],
          "formatRelative": [Function],
          "formatTime": [Function],
-          "formats": {},
-          "formatters": {
+          "formats": Object {},
+          "formatters": Object {
            "getDateTimeFormat": [Function],
            "getMessageFormat": [Function],
            "getNumberFormat": [Function],
@@ -289,7 +289,7 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
            "getRelativeFormat": [Function],
          },
          "locale": "en",
-          "messages": {},
+          "messages": Object {},
          "now": [Function],
          "onError": [Function],
          "textComponent": "span",
@@ -297,14 +297,14 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
        }
      }
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 14,
          "fontWeight": "600",
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
@@ -337,7 +337,7 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
  </View>
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -351,8 +351,8 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = `
 exports[`DateHeader component should match snapshot with suffix 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 28,
@@ -364,7 +364,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -374,7 +374,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
  />
  <View
    style={
-      {
+      Object {
        "marginHorizontal": 15,
      }
    }
@@ -382,8 +382,8 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
    <RecentDate
      date={1531152392}
      intl={
-        {
-          "defaultFormats": {},
+        Object {
+          "defaultFormats": Object {},
          "defaultLocale": "en",
          "formatDate": [Function],
          "formatHTMLMessage": [Function],
@@ -392,8 +392,8 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
          "formatPlural": [Function],
          "formatRelative": [Function],
          "formatTime": [Function],
-          "formats": {},
-          "formatters": {
+          "formats": Object {},
+          "formatters": Object {
            "getDateTimeFormat": [Function],
            "getMessageFormat": [Function],
            "getNumberFormat": [Function],
@@ -401,7 +401,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
            "getRelativeFormat": [Function],
          },
          "locale": "en",
-          "messages": {},
+          "messages": Object {},
          "now": [Function],
          "onError": [Function],
          "textComponent": "span",
@@ -409,14 +409,14 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
        }
      }
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 14,
          "fontWeight": "600",
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
@@ -449,7 +449,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
  </View>
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -463,8 +463,8 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
 exports[`DateHeader component should match snapshot without suffix 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 28,
@@ -476,7 +476,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
@@ -486,7 +486,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
  />
  <View
    style={
-      {
+      Object {
        "marginHorizontal": 15,
      }
    }
@@ -494,8 +494,8 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
    <RecentDate
      date={1531152392}
      intl={
-        {
-          "defaultFormats": {},
+        Object {
+          "defaultFormats": Object {},
          "defaultLocale": "en",
          "formatDate": [Function],
          "formatHTMLMessage": [Function],
@@ -504,8 +504,8 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
          "formatPlural": [Function],
          "formatRelative": [Function],
          "formatTime": [Function],
-          "formats": {},
-          "formatters": {
+          "formats": Object {},
+          "formatters": Object {
            "getDateTimeFormat": [Function],
            "getMessageFormat": [Function],
            "getNumberFormat": [Function],
@@ -513,7 +513,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
            "getRelativeFormat": [Function],
          },
          "locale": "en",
-          "messages": {},
+          "messages": Object {},
          "now": [Function],
          "onError": [Function],
          "textComponent": "span",
@@ -521,14 +521,14 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
        }
      }
      style={
-        {
+        Object {
          "color": "#3f4350",
          "fontSize": 14,
          "fontWeight": "600",
        }
      }
      theme={
-        {
+        Object {
          "awayIndicator": "#ffbc1f",
          "buttonBg": "#1c58d9",
          "buttonColor": "#ffffff",
@@ -561,7 +561,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
  </View>
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#3f4350",
        "flex": 1,
        "height": 1,
--- a/app/components/post_list/more_messages_button/snapshots/more_messages_button.test.js.snap
+++ b/app/components/post_list/more_messages_button/snapshots/more_messages_button.test.js.snap
@@ -3,8 +3,8 @@
 exports[`MoreMessagesButton should match snapshot 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
  style={
-    [
-      {
+    Array [
+      Object {
        "backgroundColor": "#1c58d9",
        "elevation": 1,
        "flex": 1,
@@ -12,12 +12,12 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
        "position": "absolute",
        "zIndex": 1,
      },
-      {
+      Object {
        "borderRadius": 4,
      },
-      {
-        "transform": [
-          {
+      Object {
+        "transform": Array [
+          Object {
            "translateY": -550,
          },
        ],
@@ -28,7 +28,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
  <TouchableWithFeedbackIOS
    onPress={[Function]}
    style={
-      {
+      Object {
        "borderRadius": 4,
      }
    }
@@ -37,8 +37,8 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -48,7 +48,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
            "paddingRight": 5,
            "paddingVertical": 1,
            "shadowColor": "#3f4350",
-            "shadowOffset": {
+            "shadowOffset": Object {
              "height": 6,
              "width": 0,
            },
@@ -56,7 +56,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
            "shadowRadius": 4,
            "width": "100%",
          },
-          {
+          Object {
            "borderRadius": 4,
          },
        ]
@@ -64,7 +64,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
    >
      <View
        style={
-          {
+          Object {
            "width": 22,
          }
        }
@@ -72,7 +72,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
        <CompassIcon
          name="arrow-up"
          style={
-            {
+            Object {
              "alignSelf": "center",
              "color": "#ffffff",
              "fontSize": 18,
@@ -83,7 +83,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
      </View>
      <View
        style={
-          {
+          Object {
            "alignItems": "flex-start",
            "flex": 10,
            "flexDirection": "row",
@@ -93,7 +93,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
      >
        <Text
          style={
-            {
+            Object {
              "alignSelf": "center",
              "color": "#ffffff",
              "fontWeight": "bold",
@@ -110,7 +110,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
      >
        <View
          style={
-            {
+            Object {
              "alignItems": "flex-end",
              "flex": 1,
            }
@@ -119,7 +119,7 @@ exports[`MoreMessagesButton should match snapshot 1`] = `
          <CompassIcon
            name="close"
            style={
-              {
+              Object {
                "alignSelf": "center",
                "color": "#ffffff",
                "fontSize": 18,
--- a/app/components/post_list/more_messages_button/more_messages_button.tsx
+++ b/app/components/post_list/more_messages_button/more_messages_button.tsx
@@ -317,8 +317,6 @@ export default class MoreMessageButton extends React.PureComponent<MoreMessagesB

    moreText = (count: number) => {
        const {unreadCount} = this.props;
-
-        // @ts-expect-error context type definition
        const {formatMessage} = this.context.intl;
        const isInitialMessage = unreadCount === count;

--- a/app/components/post_list/post/body/content/message_attachments/snapshots/attachment_footer.test.tsx.snap
+++ b/app/components/post_list/post/body/content/message_attachments/snapshots/attachment_footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AttachmentFooter it matches snapshot when both footer and footer_icon are provided 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "marginTop": 5,
@@ -13,12 +13,12 @@ exports[`AttachmentFooter it matches snapshot when both footer and footer_icon a
  <FastImage
    key="footer_icon"
    source={
-      {
+      Object {
        "uri": "https://images.com/image.png",
      }
    }
    style={
-      {
+      Object {
        "height": 12,
        "marginRight": 5,
        "marginTop": 1,
@@ -31,7 +31,7 @@ exports[`AttachmentFooter it matches snapshot when both footer and footer_icon a
    key="footer_text"
    numberOfLines={1}
    style={
-      {
+      Object {
        "color": "rgba(63,67,80,0.5)",
        "fontSize": 11,
      }
@@ -45,7 +45,7 @@ exports[`AttachmentFooter it matches snapshot when both footer and footer_icon a
 exports[`AttachmentFooter it matches snapshot when footer text is provided 1`] = `
 <View
  style={
-    {
+    Object {
      "flex": 1,
      "flexDirection": "row",
      "marginTop": 5,
@@ -57,7 +57,7 @@ exports[`AttachmentFooter it matches snapshot when footer text is provided 1`] =
    key="footer_text"
    numberOfLines={1}
    style={
-      {
+      Object {
        "color": "rgba(63,67,80,0.5)",
        "fontSize": 11,
      }
--- a/app/components/post_list/post/system_message/snapshots/system_message_helpers.test.js.snap
+++ b/app/components/post_list/post/system_message/snapshots/system_message_helpers.test.js.snap
@@ -3,8 +3,8 @@
 exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -15,27 +15,27 @@ exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] =
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -52,8 +52,8 @@ exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] =
 exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -64,27 +64,27 @@ exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -101,7 +101,7 @@ exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
 exports[`renderSystemMessage uses renderer for Channel Purpose update 1`] = `
 <Text
  style={
-    {
+    Object {
      "color": "rgba(63,67,80,0.6)",
      "fontSize": 15,
      "lineHeight": 20,
@@ -115,8 +115,8 @@ exports[`renderSystemMessage uses renderer for Channel Purpose update 1`] = `
 exports[`renderSystemMessage uses renderer for Guest added and join to channel 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -127,27 +127,27 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 1
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -164,8 +164,8 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 1
 exports[`renderSystemMessage uses renderer for Guest added and join to channel 2`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -176,27 +176,27 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @other.user
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -208,20 +208,20 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
    </Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username.
      </Text>
@@ -233,8 +233,8 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
 exports[`renderSystemMessage uses renderer for OLD archived channel without a username 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -245,7 +245,7 @@ exports[`renderSystemMessage uses renderer for OLD archived channel without a us
  <Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -262,8 +262,8 @@ exports[`renderSystemMessage uses renderer for OLD archived channel without a us
 exports[`renderSystemMessage uses renderer for archived channel 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -274,27 +274,27 @@ exports[`renderSystemMessage uses renderer for archived channel 1`] = `
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
@@ -311,8 +311,8 @@ exports[`renderSystemMessage uses renderer for archived channel 1`] = `
 exports[`renderSystemMessage uses renderer for unarchived channel 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "flex-start",
        "flexDirection": "row",
        "flexWrap": "wrap",
@@ -323,27 +323,27 @@ exports[`renderSystemMessage uses renderer for unarchived channel 1`] = `
  <Text>
    <Text
      style={
-        [
-          {
+        Array [
+          Object {
            "color": "rgba(63,67,80,0.6)",
            "fontSize": 15,
            "lineHeight": 20,
          },
-          {
+          Object {
            "opacity": 1,
          },
        ]
      }
    >
      <Text
-        style={[]}
+        style={Array []}
      >
        @username
      </Text>
    </Text>
    <Text
      style={
-        {
+        Object {
          "color": "rgba(63,67,80,0.6)",
          "fontSize": 15,
          "lineHeight": 20,
--- a/app/components/post_list/post_list.tsx
+++ b/app/components/post_list/post_list.tsx
@@ -3,7 +3,7 @@

 import React, {ReactElement, useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {injectIntl, intlShape} from 'react-intl';
-import {DeviceEventEmitter, FlatList, ListRenderItemInfo, NativeScrollEvent, NativeSyntheticEvent, Platform, StyleSheet, ViewToken} from 'react-native';
+import {DeviceEventEmitter, FlatList, NativeScrollEvent, NativeSyntheticEvent, Platform, StyleSheet, ViewToken} from 'react-native';

 import {DeepLinkTypes, NavigationTypes} from '@constants';
 import * as Screens from '@constants/screen';
@@ -104,7 +104,7 @@ const PostList = ({
    const [refreshing, setRefreshing] = useState(false);
    const [offsetY, setOffsetY] = useState(0);

-    const registerViewableItemsListener = useCallback((listener: any) => {
+    const registerViewableItemsListener = useCallback((listener) => {
        onViewableItemsChangedListener.current = listener;
        const removeListener = () => {
            onViewableItemsChangedListener.current = undefined;
@@ -113,7 +113,7 @@ const PostList = ({
        return removeListener;
    }, []);

-    const registerScrollEndIndexListener = useCallback((listener: any) => {
+    const registerScrollEndIndexListener = useCallback((listener) => {
        onScrollEndIndexListener.current = listener;
        const removeListener = () => {
            onScrollEndIndexListener.current = undefined;
@@ -122,7 +122,7 @@ const PostList = ({
        return removeListener;
    }, []);

-    const keyExtractor = useCallback((item: string) => {
+    const keyExtractor = useCallback((item) => {
        // All keys are strings (either post IDs or special keys)
        return item;
    }, []);
@@ -173,7 +173,7 @@ const PostList = ({
        }
    }, []);

-    const renderItem = useCallback(({item, index}: ListRenderItemInfo<string>) => {
+    const renderItem = useCallback(({item, index}) => {
        if (isStartOfNewMessages(item)) {
            // postIds includes a date item after the new message indicator so 2
            // needs to be added to the index for the length check to be correct.
--- a/app/components/progressive_image/snapshots/progressive_image.test.js.snap
+++ b/app/components/progressive_image/snapshots/progressive_image.test.js.snap
@@ -3,26 +3,26 @@
 exports[`ProgressiveImage should match snapshot for BackgroundImage 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "backgroundColor": "rgba(63,67,80,0.08)",
        "justifyContent": "center",
      },
-      {},
+      Object {},
    ]
  }
 >
  <ImageBackground
    resizeMode="cover"
    source={
-      {
+      Object {
        "uri": "https://images.com/image.png",
      }
    }
    style={
-      [
-        {
+      Array [
+        Object {
          "bottom": 0,
          "left": 0,
          "position": "absolute",
@@ -39,13 +39,13 @@ exports[`ProgressiveImage should match snapshot for BackgroundImage 1`] = `
 exports[`ProgressiveImage should match snapshot for Default Image 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "backgroundColor": "rgba(63,67,80,0.08)",
        "justifyContent": "center",
      },
-      {},
+      Object {},
    ]
  }
 >
@@ -56,8 +56,8 @@ exports[`ProgressiveImage should match snapshot for Default Image 1`] = `
    resizeMode="contain"
    source="https://images.com/image.png"
    style={
-      [
-        {
+      Array [
+        Object {
          "bottom": 0,
          "left": 0,
          "position": "absolute",
@@ -75,14 +75,14 @@ exports[`ProgressiveImage should match snapshot for Default Image 1`] = `
 exports[`ProgressiveImage should match snapshot for Image 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "backgroundColor": "rgba(63,67,80,0.08)",
        "justifyContent": "center",
      },
-      {},
-      {
+      Object {},
+      Object {
        "backgroundColor": "rgba(63,67,80,NaN)",
      },
    ]
@@ -93,14 +93,14 @@ exports[`ProgressiveImage should match snapshot for Image 1`] = `
    resizeMethod="auto"
    resizeMode="contain"
    source={
-      {
+      Object {
        "testUri": "../../../dist/assets/images/thumb.png",
      }
    }
    style={
-      [
+      Array [
        undefined,
-        {
+        Object {
          "opacity": 0.5,
          "tintColor": "#3f4350",
        },
@@ -115,13 +115,13 @@ exports[`ProgressiveImage should match snapshot for Image 1`] = `
    resizeMethod="auto"
    resizeMode="contain"
    source={
-      {
+      Object {
        "uri": "https://images.com/image.png",
      }
    }
    style={
-      [
-        {
+      Array [
+        Object {
          "bottom": 0,
          "left": 0,
          "position": "absolute",
@@ -129,7 +129,7 @@ exports[`ProgressiveImage should match snapshot for Image 1`] = `
          "top": 0,
        },
        undefined,
-        {
+        Object {
          "opacity": 0,
        },
      ]
--- a/app/components/radio_button/snapshots/radio_button_group.test.js.snap
+++ b/app/components/radio_button/snapshots/radio_button_group.test.js.snap
@@ -10,7 +10,7 @@ exports[`RadioButtonGroup should match snapshot 1`] = `
    onCheck={[Function]}
    testID="radio-1"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -48,7 +48,7 @@ exports[`RadioButtonGroup should match snapshot 1`] = `
    onCheck={[Function]}
    testID="radio-2"
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
--- a/app/components/reaction_picker/snapshots/reaction_picker.test.js.snap
+++ b/app/components/reaction_picker/snapshots/reaction_picker.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Reactions Should match snapshot with default emojis 1`] = `
 <View
  style={
-    {
+    Object {
      "alignItems": "center",
      "flex": 1,
      "flexDirection": "row",
@@ -19,7 +19,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="thumbsup"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -54,7 +54,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="smiley"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -89,7 +89,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="white_check_mark"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -124,7 +124,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="heart"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -159,7 +159,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="eyes"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -194,7 +194,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
    emoji="raised_hands"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -229,14 +229,14 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "backgroundColor": "rgba(63,67,80,0.04)",
            "borderRadius": 4,
            "justifyContent": "center",
          },
-          {
+          Object {
            "height": 48,
            "width": 48,
          },
@@ -247,7 +247,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
        name="emoticon-plus-outline"
        size={31.2}
        style={
-          {
+          Object {
            "color": "#3f4350",
          }
        }
@@ -260,7 +260,7 @@ exports[`Reactions Should match snapshot with default emojis 1`] = `
 exports[`Reactions Should match snapshot with default emojis 2`] = `
 <View
  style={
-    {
+    Object {
      "alignItems": "center",
      "flex": 1,
      "flexDirection": "row",
@@ -276,7 +276,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="rocket"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -311,7 +311,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="100"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -346,7 +346,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="thumbsup"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -381,7 +381,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="smiley"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -416,7 +416,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="white_check_mark"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -451,7 +451,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
    emoji="heart"
    iconSize={32}
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -486,14 +486,14 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "backgroundColor": "rgba(63,67,80,0.04)",
            "borderRadius": 4,
            "justifyContent": "center",
          },
-          {
+          Object {
            "height": 48,
            "width": 48,
          },
@@ -504,7 +504,7 @@ exports[`Reactions Should match snapshot with default emojis 2`] = `
        name="emoticon-plus-outline"
        size={31.2}
        style={
-          {
+          Object {
            "color": "#3f4350",
          }
        }
--- a/app/components/search_bar/snapshots/search_bar.test.js.snap
+++ b/app/components/search_bar/snapshots/search_bar.test.js.snap
@@ -3,30 +3,30 @@
 exports[`SearchBar should match snapshot 1`] = `
 <View
  style={
-    [
-      {
+    Array [
+      Object {
        "alignItems": "center",
        "flexDirection": "row",
        "height": 20,
        "justifyContent": "flex-start",
        "overflow": "hidden",
      },
-      {},
+      Object {},
    ]
  }
  testID="search_bar"
 >
  <ForwardRef(AnimatedComponentWrapper)
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
        },
-        {
+        Object {
          "height": 10,
          "marginRight": 5,
        },
-        {
+        Object {
          "marginLeft": 0,
        },
      ]
@@ -39,8 +39,8 @@ exports[`SearchBar should match snapshot 1`] = `
      autoFocus={true}
      blurOnSubmit={true}
      cancelButtonProps={
-        {
-          "buttonTextStyle": {
+        Object {
+          "buttonTextStyle": Object {
            "color": "#aaaaaa",
            "fontSize": 14,
          },
@@ -54,7 +54,7 @@ exports[`SearchBar should match snapshot 1`] = `
          onPress={[Function]}
          size={18}
          style={
-            {
+            Object {
              "color": "#cccccc",
            }
          }
@@ -62,7 +62,7 @@ exports[`SearchBar should match snapshot 1`] = `
        />
      }
      containerStyle={
-        {
+        Object {
          "backgroundColor": "#ffffff",
          "flex": 1,
          "paddingBottom": 0,
@@ -73,14 +73,14 @@ exports[`SearchBar should match snapshot 1`] = `
      editable={true}
      enablesReturnKeyAutomatically={true}
      inputContainerStyle={
-        {
+        Object {
          "backgroundColor": undefined,
          "borderRadius": 2,
          "height": 10,
        }
      }
      inputStyle={
-        {
+        Object {
          "backgroundColor": "transparent",
          "color": "#fff",
          "fontSize": 14,
@@ -93,7 +93,7 @@ exports[`SearchBar should match snapshot 1`] = `
      keyboardAppearance="keyboard-appearance"
      keyboardType="keyboard-type"
      leftIconContainerStyle={
-        {
+        Object {
          "marginLeft": 4,
          "width": 30,
        }
@@ -114,11 +114,11 @@ exports[`SearchBar should match snapshot 1`] = `
          name="magnify"
          size={24}
          style={
-            [
-              {
+            Array [
+              Object {
                "flex": 1,
              },
-              {
+              Object {
                "color": "#bbbbbb",
                "top": 8,
              },
--- a/app/components/sidebars/main/snapshots/main_sidebar.test.js.snap
+++ b/app/components/sidebars/main/snapshots/main_sidebar.test.js.snap
@@ -4,7 +4,7 @@ exports[`MainSidebar should match, full snapshot 1`] = `
 <DrawerLayoutAdapter
  drawerWidth={710}
  forwardRef={
-    {
+    Object {
      "current": null,
    }
  }
--- a/app/components/sidebars/main/channels_list/channel_item/snapshots/channel_item.test.js.snap
+++ b/app/components/sidebars/main/channels_list/channel_item/snapshots/channel_item.test.js.snap
@@ -7,8 +7,8 @@ exports[`ChannelItem should match snapshot 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -20,8 +20,8 @@ exports[`ChannelItem should match snapshot 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -42,14 +42,14 @@ exports[`ChannelItem should match snapshot 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -83,8 +83,8 @@ exports[`ChannelItem should match snapshot 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -94,7 +94,7 @@ exports[`ChannelItem should match snapshot 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -118,8 +118,8 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -131,7 +131,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
  >
    <View
      style={
-        {
+        Object {
          "backgroundColor": "#5d89ea",
          "width": 5,
        }
@@ -139,14 +139,14 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
    />
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
            "paddingLeft": 16,
          },
-          {
+          Object {
            "backgroundColor": "rgba(255,255,255,0.1)",
            "paddingLeft": 11,
          },
@@ -164,14 +164,14 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -205,8 +205,8 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -216,7 +216,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "opacity": 1,
            },
@@ -238,8 +238,8 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -251,7 +251,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
  >
    <View
      style={
-        {
+        Object {
          "backgroundColor": "#5d89ea",
          "width": 5,
        }
@@ -259,14 +259,14 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
    />
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
            "paddingLeft": 16,
          },
-          {
+          Object {
            "backgroundColor": "rgba(255,255,255,0.1)",
            "paddingLeft": 11,
          },
@@ -284,14 +284,14 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -325,8 +325,8 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -336,7 +336,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "opacity": 1,
            },
@@ -358,8 +358,8 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -371,7 +371,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
  >
    <View
      style={
-        {
+        Object {
          "backgroundColor": "#5d89ea",
          "width": 5,
        }
@@ -379,14 +379,14 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
    />
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
            "paddingLeft": 16,
          },
-          {
+          Object {
            "backgroundColor": "rgba(255,255,255,0.1)",
            "paddingLeft": 11,
          },
@@ -404,14 +404,14 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -445,8 +445,8 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -456,7 +456,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "opacity": 1,
            },
@@ -478,8 +478,8 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -491,8 +491,8 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -513,14 +513,14 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -554,8 +554,8 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -565,7 +565,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -589,8 +589,8 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -602,8 +602,8 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -624,14 +624,14 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -665,8 +665,8 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -676,7 +676,7 @@ exports[`ChannelItem should match snapshot for deactivated user and not searchRe
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -700,8 +700,8 @@ exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -713,8 +713,8 @@ exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -735,14 +735,14 @@ exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -776,8 +776,8 @@ exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -787,7 +787,7 @@ exports[`ChannelItem should match snapshot for isManualUnread 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -815,8 +815,8 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -828,8 +828,8 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -850,14 +850,14 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -891,8 +891,8 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -902,7 +902,7 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -918,7 +918,7 @@ exports[`ChannelItem should match snapshot when there is a call 1`] = `
        name="phone-in-talk"
        size={16}
        style={
-          {
+          Object {
            "color": "#ffffff",
            "flex": 1,
            "marginRight": 20,
@@ -938,8 +938,8 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -951,8 +951,8 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -973,14 +973,14 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -1015,8 +1015,8 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -1026,7 +1026,7 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -1041,12 +1041,12 @@ exports[`ChannelItem should match snapshot with custom status emoji 1`] = `
      <CustomStatusEmoji
        emojiSize={16}
        style={
-          [
-            {
+          Array [
+            Object {
              "color": "rgba(255,255,255,0.6)",
              "opacity": 0.6,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -1069,8 +1069,8 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
@@ -1082,8 +1082,8 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -1104,14 +1104,14 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -1145,8 +1145,8 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -1156,7 +1156,7 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -1180,13 +1180,13 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
 >
  <View
    style={
-      [
-        {
+      Array [
+        Object {
          "flex": 1,
          "flexDirection": "row",
          "height": 44,
        },
-        {
+        Object {
          "opacity": 0.5,
        },
      ]
@@ -1195,8 +1195,8 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
  >
    <View
      style={
-        [
-          {
+        Array [
+          Object {
            "alignItems": "center",
            "flex": 1,
            "flexDirection": "row",
@@ -1217,14 +1217,14 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
        membersCount={1}
        size={24}
        statusStyle={
-          {
+          Object {
            "backgroundColor": "#1e325c",
            "borderColor": "transparent",
          }
        }
        testID="main.sidebar.channels_list.list.channel_item.channel_icon"
        theme={
-          {
+          Object {
            "awayIndicator": "#ffbc1f",
            "buttonBg": "#1c58d9",
            "buttonColor": "#ffffff",
@@ -1258,8 +1258,8 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
        ellipsizeMode="tail"
        numberOfLines={1}
        style={
-          [
-            {
+          Array [
+            Object {
              "alignSelf": "center",
              "color": "rgba(255,255,255,0.6)",
              "fontFamily": "Open Sans",
@@ -1269,7 +1269,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
              "maxWidth": "80%",
              "paddingRight": 10,
            },
-            {
+            Object {
              "color": "#ffffff",
              "fontWeight": "500",
              "maxWidth": "70%",
@@ -1283,7 +1283,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
      </Text>
      <Badge
        containerStyle={
-          {
+          Object {
            "borderColor": "#192a4d",
            "borderRadius": 14,
            "borderWidth": 0,
@@ -1294,7 +1294,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
        }
        count={1}
        countStyle={
-          {
+          Object {
            "color": "#1e325c",
            "fontSize": 12,
            "fontWeight": "bold",
@@ -1306,7 +1306,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
        minWidth={21}
        onPress={[Function]}
        style={
-          {
+          Object {
            "backgroundColor": "#ffffff",
            "height": 21,
            "padding": 3,
--- a/app/components/sidebars/main/channels_list/filtered_list/snapshots/filtered_list.test.js.snap
+++ b/app/components/sidebars/main/channels_list/filtered_list/snapshots/filtered_list.test.js.snap
@@ -3,22 +3,22 @@
 exports[`ChannelsList FilteredList should match snapshot 1`] = `
 <FilteredList
  actions={
-    {
+    Object {
      "getProfilesInTeam": [MockFunction],
      "makeGroupMessageVisibleIfNecessary": [MockFunction],
      "searchChannels": [MockFunction],
      "searchProfiles": [MockFunction],
    }
  }
-  archivedChannels={[]}
-  channels={{}}
-  currentChannel={{}}
-  currentTeam={{}}
+  archivedChannels={Array []}
+  channels={Object {}}
+  currentChannel={Object {}}
+  currentTeam={Object {}}
  currentUserId="current-user-id"
-  groupChannelMemberDetails={{}}
+  groupChannelMemberDetails={Object {}}
  intl={
-    {
-      "defaultFormats": {},
+    Object {
+      "defaultFormats": Object {},
      "defaultLocale": "en",
      "formatDate": [Function],
      "formatHTMLMessage": [Function],
@@ -27,8 +27,8 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
      "formatPlural": [Function],
      "formatRelative": [Function],
      "formatTime": [Function],
-      "formats": {},
-      "formatters": {
+      "formats": Object {},
+      "formatters": Object {
        "getDateTimeFormat": [Function],
        "getMessageFormat": [Function],
        "getNumberFormat": [Function],
@@ -36,7 +36,7 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
        "getRelativeFormat": [Function],
      },
      "locale": "en",
-      "messages": {},
+      "messages": Object {},
      "now": [Function],
      "onError": [Function],
      "textComponent": "span",
@@ -45,19 +45,19 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
  }
  isLandscape={false}
  onSelectChannel={[MockFunction]}
-  otherChannels={[]}
-  pastDirectMessages={[]}
-  profiles={{}}
+  otherChannels={Array []}
+  pastDirectMessages={Array []}
+  profiles={Object {}}
  restrictDms={false}
-  searchOrder={[]}
-  statuses={{}}
-  styles={{}}
-  teamProfiles={{}}
+  searchOrder={Array []}
+  statuses={Object {}}
+  styles={Object {}}
+  teamProfiles={Object {}}
  teammateNameDisplay="teammate-name-display"
  term="term"
  testID="main.sidebar.channels_list.filtered_list"
  theme={
-    {
+    Object {
      "awayIndicator": "#ffbc1f",
      "buttonBg": "#1c58d9",
      "buttonColor": "#ffffff",
--- a/app/components/sidebars/main/channels_list/list/snapshots/list.test.js.snap
+++ b/app/components/sidebars/main/channels_list/list/snapshots/list.test.js.snap
@@ -6,7 +6,7 @@ exports[`ChannelsList List should match snapshot 1`] = `
 >
  <SectionList
    contentContainerStyle={
-      {
+      Object {
        "paddingBottom": 44,
      }
    }
@@ -18,11 +18,11 @@ exports[`ChannelsList List should match snapshot 1`] = `
    onViewableItemsChanged={[Function]}
    renderItem={[Function]}
    renderSectionHeader={[Function]}
-    sections={[]}
+    sections={Array []}
    stickySectionHeadersEnabled={true}
    testID="main.sidebar.channels_list.list"
    viewabilityConfig={
-      {
+      Object {
        "itemVisiblePercentThreshold": 100,
        "waitForInteraction": true,
      }
@@ -38,7 +38,7 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
  <Connect(ThreadsEntry) />
  <SectionList
    contentContainerStyle={
-      {
+      Object {
        "paddingBottom": 44,
      }
    }
@@ -50,11 +50,11 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
    onViewableItemsChanged={[Function]}
    renderItem={[Function]}
    renderSectionHeader={[Function]}
-    sections={[]}
+    sections={Array []}
    stickySectionHeadersEnabled={true}
    testID="main.sidebar.channels_list.list"
    viewabilityConfig={
-      {
+      Object {
        "itemVisiblePercentThreshold": 100,
        "waitForInteraction": true,
      }
@@ -63,15 +63,15 @@ exports[`ChannelsList List should match snapshot with collapsed threads enabled
  <UnreadIndicatorIOS
    onPress={[Function]}
    style={
-      [
+      Array [
        undefined,
-        {
+        Object {
          "marginTop": 64,
        },
      ]
    }
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
@@ -110,7 +110,7 @@ exports[`ChannelsList List should match snapshot with unreads not on top 1`] = `
 >
  <SectionList
    contentContainerStyle={
-      {
+      Object {
        "paddingBottom": 44,
      }
    }
@@ -122,11 +122,11 @@ exports[`ChannelsList List should match snapshot with unreads not on top 1`] = `
    onViewableItemsChanged={[Function]}
    renderItem={[Function]}
    renderSectionHeader={[Function]}
-    sections={[]}
+    sections={Array []}
    stickySectionHeadersEnabled={true}
    testID="main.sidebar.channels_list.list"
    viewabilityConfig={
-      {
+      Object {
        "itemVisiblePercentThreshold": 100,
        "waitForInteraction": true,
      }
@@ -135,12 +135,12 @@ exports[`ChannelsList List should match snapshot with unreads not on top 1`] = `
  <UnreadIndicatorIOS
    onPress={[Function]}
    style={
-      [
+      Array [
        undefined,
      ]
    }
    theme={
-      {
+      Object {
        "awayIndicator": "#ffbc1f",
        "buttonBg": "#1c58d9",
        "buttonColor": "#ffffff",
--- a/app/components/sidebars/main/channels_list/list/index.js
+++ b/app/components/sidebars/main/channels_list/list/index.js
@@ -1,6 +1,5 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-
 import {connect} from 'react-redux';

 import {DeviceTypes, ViewTypes} from '@constants';
@@ -13,9 +12,10 @@ import {
    getOrderedChannelIds,
    getCurrentChannelId,
 } from '@mm-redux/selectors/entities/channels';
-import {getTheme, getSidebarPreferences, isCollapsedThreadsEnabled} from '@mm-redux/selectors/entities/preferences';
+import {getTheme, getFavoritesPreferences, getSidebarPreferences, isCollapsedThreadsEnabled} from '@mm-redux/selectors/entities/preferences';
 import {haveITeamPermission} from '@mm-redux/selectors/entities/roles';
 import {getCurrentTeamId} from '@mm-redux/selectors/entities/teams';
+import {getCurrentUserRoles} from '@mm-redux/selectors/entities/users';
 import {showCreateOption} from '@mm-redux/utils/channel_utils';
 import {memoizeResult} from '@mm-redux/utils/helpers';
 import {shouldShowLegacySidebar} from '@utils/categories';
@@ -87,4 +87,14 @@ function mapStateToProps(state) {
    };
 }

-export default connect(mapStateToProps)(List);
+function areStatesEqual(next, prev) {
+    const equalRoles = getCurrentUserRoles(prev) === getCurrentUserRoles(next);
+    const equalChannels = next.entities.channels === prev.entities.channels;
+    const equalConfig = next.entities.general.config === prev.entities.general.config;
+    const equalUsers = next.entities.users.profiles === prev.entities.users.profiles;
+    const equalFav = getFavoritesPreferences(next) === getFavoritesPreferences(prev);
+
+    return equalChannels && equalConfig && equalRoles && equalUsers && equalFav;
+}
+
+export default connect(mapStateToProps, null, null, {pure: true, areStatesEqual})(List);
--- a/app/components/sidebars/main/channels_list/switch_teams_button/snapshots/switch_teams_button.test.js.snap
+++ b/app/components/sidebars/main/channels_list/switch_teams_button/snapshots/switch_teams_button.test.js.snap
@@ -10,7 +10,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "backgroundColor": "rgba(255,255,255,0.24)",
          "borderRadius": 2,
@@ -27,7 +27,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
        name="chevron-left"
        size={24}
        style={
-          {
+          Object {
            "color": "#ffffff",
            "left": -2,
            "top": 1,
@@ -36,7 +36,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
      />
      <Connect(TeamIcon)
        styleContainer={
-          {
+          Object {
            "alignItems": "center",
            "height": 24,
            "justifyContent": "center",
@@ -44,13 +44,13 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
          }
        }
        styleImage={
-          {
+          Object {
            "height": 24,
            "width": 24,
          }
        }
        styleText={
-          {
+          Object {
            "fontFamily": "Open Sans",
            "fontSize": 14,
          }
@@ -62,7 +62,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
  </TouchableHighlight>
  <Badge
    containerStyle={
-      {
+      Object {
        "borderColor": "#1e325c",
        "borderRadius": 14,
        "borderWidth": 2,
@@ -73,7 +73,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
    }
    count={1}
    countStyle={
-      {
+      Object {
        "color": "#1e325c",
        "fontSize": 10,
        "fontWeight": "bold",
@@ -83,7 +83,7 @@ exports[`SwitchTeamsButton should match snapshot 1`] = `
    minHeight={20}
    minWidth={20}
    style={
-      {
+      Object {
        "backgroundColor": "#ffffff",
        "height": 20,
        "padding": 3,
--- a/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
+++ b/app/components/sidebars/main/channels_list/unread_indicator/unread_indicator.base.js
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {
    Platform,
    TouchableWithoutFeedback,
    View,
+    ViewPropTypes,
 } from 'react-native';

 import CompassIcon from '@components/compass_icon';
--- a/app/components/sidebars/main/teams_list/teams_list_item/snapshots/teams_list_item.test.js.snap
+++ b/app/components/sidebars/main/teams_list/teams_list_item/snapshots/teams_list_item.test.js.snap
@@ -3,7 +3,7 @@
 exports[`TeamsListItem should match snapshot 1`] = `
 <View
  style={
-    {
+    Object {
      "marginTop": 10,
    }
  }
@@ -15,7 +15,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "flex": 1,
          "flexDirection": "row",
@@ -28,14 +28,14 @@ exports[`TeamsListItem should match snapshot 1`] = `
      <View>
        <Connect(TeamIcon)
          styleContainer={
-            {
+            Object {
              "backgroundColor": "#ffffff",
              "height": 40,
              "width": 40,
            }
          }
          styleText={
-            {
+            Object {
              "fontSize": 18,
            }
          }
@@ -44,7 +44,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
        />
        <Badge
          containerStyle={
-            {
+            Object {
              "borderColor": "#1e325c",
              "borderRadius": 14,
              "borderWidth": 2,
@@ -55,7 +55,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
          }
          count={1}
          countStyle={
-            {
+            Object {
              "color": "#1e325c",
              "fontSize": 10,
              "fontWeight": "bold",
@@ -65,7 +65,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
          minHeight={20}
          minWidth={20}
          style={
-            {
+            Object {
              "backgroundColor": "#ffffff",
              "height": 20,
              "padding": 3,
@@ -76,7 +76,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
      </View>
      <View
        style={
-          {
+          Object {
            "flex": 1,
            "flexDirection": "column",
            "marginLeft": 10,
@@ -87,7 +87,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
          ellipsizeMode="tail"
          numberOfLines={1}
          style={
-            {
+            Object {
              "color": "#ffffff",
              "fontSize": 18,
            }
@@ -100,7 +100,7 @@ exports[`TeamsListItem should match snapshot 1`] = `
          ellipsizeMode="tail"
          numberOfLines={1}
          style={
-            {
+            Object {
              "color": "rgba(255,255,255,0.5)",
              "fontSize": 12,
            }
--- a/app/components/sidebars/settings/snapshots/drawer_item.test.js.snap
+++ b/app/components/sidebars/settings/snapshots/drawer_item.test.js.snap
@@ -7,7 +7,7 @@ exports[`DrawerItem should match snapshot 1`] = `
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#ffffff",
        "flexDirection": "row",
        "minHeight": 50,
@@ -16,7 +16,7 @@ exports[`DrawerItem should match snapshot 1`] = `
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "height": 50,
          "justifyContent": "center",
@@ -28,12 +28,12 @@ exports[`DrawerItem should match snapshot 1`] = `
      <CompassIcon
        name="icon-name"
        style={
-          [
-            {
+          Array [
+            Object {
              "color": "rgba(63,67,80,0.64)",
              "fontSize": 24,
            },
-            {
+            Object {
              "color": "#d24b4e",
            },
          ]
@@ -42,14 +42,14 @@ exports[`DrawerItem should match snapshot 1`] = `
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
        }
      }
    >
      <View
        style={
-          {
+          Object {
            "flex": 1,
            "justifyContent": "center",
            "paddingBottom": 14,
@@ -61,17 +61,17 @@ exports[`DrawerItem should match snapshot 1`] = `
          defaultMessage="default message"
          id="i18-id"
          style={
-            [
-              {
+            Array [
+              Object {
                "color": "rgba(63,67,80,0.5)",
                "fontSize": 17,
                "includeFontPadding": false,
                "textAlignVertical": "center",
              },
-              {
+              Object {
                "color": "#d24b4e",
              },
-              {
+              Object {
                "textAlign": "center",
                "textAlignVertical": "center",
              },
@@ -81,7 +81,7 @@ exports[`DrawerItem should match snapshot 1`] = `
      </View>
      <View
        style={
-          {
+          Object {
            "backgroundColor": "rgba(63,67,80,0.2)",
            "height": 1,
          }
@@ -99,7 +99,7 @@ exports[`DrawerItem should match snapshot without separator and centered false 1
 >
  <View
    style={
-      {
+      Object {
        "backgroundColor": "#ffffff",
        "flexDirection": "row",
        "minHeight": 50,
@@ -108,7 +108,7 @@ exports[`DrawerItem should match snapshot without separator and centered false 1
  >
    <View
      style={
-        {
+        Object {
          "alignItems": "center",
          "height": 50,
          "justifyContent": "center",
@@ -120,12 +120,12 @@ exports[`DrawerItem should match snapshot without separator and centered false 1
      <CompassIcon
        name="icon-name"
        style={
-          [
-            {
+          Array [
+            Object {
              "color": "rgba(63,67,80,0.64)",
              "fontSize": 24,
            },
-            {
+            Object {
              "color": "#d24b4e",
            },
          ]
@@ -134,14 +134,14 @@ exports[`DrawerItem should match snapshot without separator and centered false 1
    </View>
    <View
      style={
-        {
+        Object {
          "flex": 1,
        }
      }
    >
      <View
        style={
-          {
+          Object {
            "flex": 1,
            "justifyContent": "center",
            "paddingBottom": 14,
@@ -153,17 +153,17 @@ exports[`DrawerItem should match snapshot without separator and centered false 1
          defaultMessage="default message"
          id="i18-id"
          style={
-            [
-              {
+            Array [
+              Object {
                "color": "rgba(63,67,80,0.5)",
                "fontSize": 17,
                "includeFontPadding": false,
                "textAlignVertical": "center",
              },
-              {
+              Object {
                "color": "#d24b4e",
              },
-              {},
+              Object {},
            ]
          }
        />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Elias Nahum	73c2bb8350	reset version number to 1.56.0 and build to 436	2022-11-08 13:43:12 +02:00
Mattermost Build	7e8016fec4	Bump build to 436 (#6746 ) (#6747 ) * Revert "Downgrade mmkv and bump to 435 (#6742)" This reverts commit `66b469bb31`. * Revert "Bump Version to 1.56.0 and build to 431 (#6723)" This reverts commit `fdee027b4a`. * Revert "[V1] update deps (#6666)" This reverts commit `8137241f12`. * bump build to 436 * update snapshots (cherry picked from commit `db86bbc42b`) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>	2022-11-08 10:28:09 +02:00
Mattermost Build	1f40762799	Downgrade mmkv and bump to 435 (#6742 ) (#6743 ) (cherry picked from commit `66b469bb31`) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>	2022-11-07 13:10:46 +02:00
Mattermost Build	10711ff5e3	v1 Bump build to 344 (#6740 ) (#6741 ) (cherry picked from commit `f80b49a6f0`) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>	2022-11-07 11:09:32 +02:00
Mattermost Build	97621b68cc	Bump app build number to 433 (#6736 ) (#6737 ) (cherry picked from commit `7fc17021a2`) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>	2022-11-05 23:40:36 +02:00
Elias Nahum	933c9235c8	fix v1 builds	2022-11-05 23:21:00 +02:00
Mattermost Build	5cf6e16407	[v1] fix Fastfile for android release (#6725 ) (#6727 )	2022-11-02 14:33:21 +02:00
Mattermost Build	73d9be6cd6	Bump Version to 1.56.0 and build to 431 (#6723 ) (#6724 ) * Bump app version number to 1.56.0 * Bump app build number to 431 (cherry picked from commit `fdee027b4a`) Co-authored-by: Elias Nahum <nahumhbl@gmail.com>	2022-11-02 09:58:30 +02:00
Mattermost Build	0439564bfc	Update ESR version (#6701 ) (#6722 ) (cherry picked from commit `525269a0a1`) Co-authored-by: Amy Blais <29708087+amyblais@users.noreply.github.com>	2022-11-02 09:45:14 +02:00