[V1] update deps (#6666)

* v1 update dependencies

* fix eslint

* update ci node version

* Fix detox and jest expect imports

* update gradle memory settings

* QA feedback

* android executor xlarge

Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>

.circleci/config.yml

@@ -1,13 +1,13 @@
 version: 2.1
 orbs:
   owasp: entur/owasp@0.0.10
-  node: circleci/node@4.5.1
+  node: circleci/node@5.0.3
 
 executors:
   android:
     parameters:
       resource_class:
-        default: large
+        default: xlarge
         type: string
     environment:
       NODE_OPTIONS: --max_old_space_size=12000
@@ -93,8 +93,7 @@ commands:
     description: "Get JavaScript dependencies"
     steps:
       - node/install:
-          node-version: '16.2.0'
-          install-npm: false
+          node-version: '16.15.0'
       - restore_cache:
           name: Restore npm cache
           key: v2-npm-{{ checksum "package.json" }}-{{ arch }}

.eslintrc.json

@@ -1,13 +1,13 @@
 {
   "extends": [
-    "plugin:mattermost/react",
+    "./eslint/eslint-mattermost",
+    "./eslint/eslint-react",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": [
     "@typescript-eslint",
-    "mattermost",
     "import"
   ],
   "settings": {

.flowconfig

@@ -11,6 +11,8 @@ 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/.*/.*
 
@@ -63,4 +65,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.162.0
+^0.176.3

.gitignore

@@ -32,8 +32,10 @@ DerivedData
 *.apk
 *.aab
 *.xcuserstate
+ios/.xcode.env.local
 project.xcworkspace
 ios/Pods
+/vendor/bundle/
 .podinstall
 
 # Android/IntelliJ
@@ -79,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/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 fastlane/.env
-fastlane/report.xml
 
 # Sentry
 android/sentry.properties

android/app/build.gradle

@@ -120,9 +120,12 @@ def jscFlavor = 'org.webkit:android-jsc-intl:+'
 def enableHermes = project.ext.react.get("enableHermes", false);
 
 /**
- * Architectures to build native code for in debug.
+ * Architectures to build native code for.
  */
-def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
 
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
@@ -136,6 +139,78 @@ android {
         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 {
@@ -152,22 +227,25 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk enableSeparateBuildPerCPUArchitecture  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include (*reactNativeArchitectures())
         }
     }
     buildTypes {
+        def useReleaseKey = project.hasProperty('MATTERMOST_RELEASE_STORE_FILE')
         release {
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            signingConfig signingConfigs.release
+            if (useReleaseKey) {
+                signingConfig signingConfigs.release
+            } else {
+                signingConfig signingConfigs.debug
+            }
         }
         debug {
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            if (nativeArchitectures) {
-                ndk {
-                    abiFilters nativeArchitectures.split(',')
-                }
+            if (useReleaseKey) {
+                signingConfig signingConfigs.release
+            } else {
+                signingConfig signingConfigs.debug
             }
         }
         unsigned.initWith(buildTypes.release)
@@ -212,25 +290,6 @@ 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"])
 
@@ -250,10 +309,10 @@ dependencies {
 
 
     if (enableHermes) {
-        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")
+        //noinspection GradleDynamicVersion
+        implementation("com.facebook.react:hermes-engine:+") { // From node_modules
+            exclude group:'com.facebook.fbjni'
+        }
     } else {
         implementation jscFlavor
     }
@@ -275,6 +334,39 @@ 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) {
@@ -284,3 +376,11 @@ 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"
+}

android/app/src/debug/AndroidManifest.xml

@@ -8,6 +8,6 @@
         android:usesCleartextTraffic="true"
         tools:targetApi="28"
         tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
     </application>
 </manifest>

android/app/src/debug/java/com/rn/ReactNativeFlipper.java

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and 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,6 +19,7 @@ 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;
@@ -47,7 +48,7 @@ public class ReactNativeFlipper {
       ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
       if (reactContext == null) {
         reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceManager.ReactInstanceEventListener() {
+            new ReactInstanceEventListener() {
               @Override
               public void onReactContextInitialized(ReactContext reactContext) {
                 reactInstanceManager.removeReactInstanceEventListener(this);

android/app/src/main/AndroidManifest.xml

@@ -33,10 +33,12 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:windowSoftInputMode="adjustResize"
         android:launchMode="singleTask"
-        android:taskAffinity="">
+        android:taskAffinity=""
+        android:exported="true"
+        >
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
@@ -72,7 +74,9 @@
                 android:screenOrientation="portrait"
                 android:theme="@style/AppTheme"
                 android:taskAffinity="com.mattermost.share"
-                android:launchMode="singleInstance">
+                android:launchMode="singleInstance"
+                android:exported="true"
+        >
             <intent-filter>
                 <action android:name="android.intent.action.SEND" />
                 <action android:name="android.intent.action.SEND_MULTIPLE" />

android/app/src/main/java/com/mattermost/newarchitecture/MainApplicationReactNativeHost.java

@@ -0,0 +1,116 @@
+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;
+      }
+    };
+  }
+}

android/app/src/main/java/com/mattermost/newarchitecture/components/MainComponentsRegistry.java

@@ -0,0 +1,36 @@
+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);
+  }
+}

android/app/src/main/java/com/mattermost/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java

@@ -0,0 +1,48 @@
+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;
+    }
+  }
+}

android/app/src/main/java/com/mattermost/rnbeta/CustomPushNotification.java

@@ -22,6 +22,7 @@ import java.util.List;
 import java.util.Map;
 
 import com.wix.reactnativenotifications.core.notification.PushNotification;
+import com.wix.reactnativenotifications.core.NotificationIntentAdapter;
 import com.wix.reactnativenotifications.core.AppLaunchHelper;
 import com.wix.reactnativenotifications.core.AppLifecycleFacade;
 import com.wix.reactnativenotifications.core.JsIOHelper;
@@ -246,7 +247,7 @@ public class CustomPushNotification extends PushNotification {
     }
 
     private void buildNotification(Integer notificationId, boolean createSummary) {
-        final PendingIntent pendingIntent = super.getCTAPendingIntent();
+        final PendingIntent pendingIntent = NotificationIntentAdapter.createPendingNotificationIntent(mContext, mNotificationProps);
         final Notification notification = buildNotification(pendingIntent);
         if (createSummary) {
             final Notification summary = getNotificationSummaryBuilder(pendingIntent).build();

android/app/src/main/java/com/mattermost/rnbeta/CustomPushNotificationHelper.java

@@ -1,5 +1,6 @@
 package com.mattermost.rnbeta;
 
+import android.annotation.SuppressLint;
 import android.app.Notification;
 import android.app.NotificationChannel;
 import android.app.NotificationManager;
@@ -128,11 +129,20 @@ public class CustomPushNotificationHelper {
         replyIntent.putExtra(NOTIFICATION_ID, notificationId);
         replyIntent.putExtra("pushNotification", bundle);
 
-        PendingIntent replyPendingIntent = PendingIntent.getBroadcast(
-                context,
-                notificationId,
-                replyIntent,
-                PendingIntent.FLAG_UPDATE_CURRENT);
+        PendingIntent replyPendingIntent;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            replyPendingIntent = PendingIntent.getBroadcast(
+                    context,
+                    notificationId,
+                    replyIntent,
+                    PendingIntent.FLAG_UPDATE_CURRENT | PendingIntent.FLAG_MUTABLE);
+        } else {
+            replyPendingIntent = PendingIntent.getBroadcast(
+                    context,
+                    notificationId,
+                    replyIntent,
+                    PendingIntent.FLAG_UPDATE_CURRENT);
+        }
 
         RemoteInput remoteInput = new RemoteInput.Builder(KEY_TEXT_REPLY)
                 .setLabel("Reply")
@@ -381,10 +391,12 @@ public class CustomPushNotificationHelper {
 
     private static void setNotificationDeleteIntent(Context context, NotificationCompat.Builder notification, Bundle bundle, int notificationId) {
         // Let's add a delete intent when the notification is dismissed
+        final String PUSH_NOTIFICATION_EXTRA_NAME = "pushNotification";
         Intent delIntent = new Intent(context, NotificationDismissService.class);
-        PushNotificationProps notificationProps = new PushNotificationProps(bundle);
         delIntent.putExtra(NOTIFICATION_ID, notificationId);
-        PendingIntent deleteIntent = NotificationIntentAdapter.createPendingNotificationIntent(context, delIntent, notificationProps);
+        delIntent.putExtra(PUSH_NOTIFICATION_EXTRA_NAME, bundle);
+        @SuppressLint("UnspecifiedImmutableFlag")
+        PendingIntent deleteIntent = PendingIntent.getService(context, (int) System.currentTimeMillis(), delIntent, PendingIntent.FLAG_ONE_SHOT | PendingIntent.FLAG_IMMUTABLE);
         notification.setDeleteIntent(deleteIntent);
     }
 

android/app/src/main/java/com/mattermost/rnbeta/MainActivity.java

@@ -1,18 +1,44 @@
 package com.mattermost.rnbeta;
 
 import android.os.Bundle;
-
-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);
@@ -21,7 +47,7 @@ public class MainActivity extends NavigationActivity {
     }
 
     @Override
-    public void onConfigurationChanged(@NonNull Configuration newConfig) {
+    public void onConfigurationChanged(Configuration newConfig) {
         super.onConfigurationChanged(newConfig);
 
         if (newConfig.hardKeyboardHidden == Configuration.HARDKEYBOARDHIDDEN_NO) {
@@ -31,6 +57,12 @@ 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
@@ -38,15 +70,24 @@ public class MainActivity extends NavigationActivity {
     */
     @Override
     public boolean dispatchKeyEvent(KeyEvent event) {
-        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;
+        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;
+                }
+            }
         }
         return super.dispatchKeyEvent(event);
-    }
+    };
 
     private void setHWKeyboardConnected() {
         HWKeyboardConnected = getResources().getConfiguration().keyboard == Configuration.KEYBOARD_QWERTY;
     }
-}
+}

android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java

@@ -25,16 +25,19 @@ 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.facebook.react.bridge.JSIModulePackage;
+import com.mattermost.newarchitecture.MainApplicationReactNativeHost;
 
 
 public class MainApplication extends NavigationApplication implements INotificationsApplication, INotificationsDrawerApplication {
@@ -44,68 +47,75 @@ 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
+      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
-              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;
-                };
-              }
-            }
-      );
+        return packages;
+      }
 
-      return packages;
-    }
+      @Override
+      protected String getJSMainModuleName() {
+        return "index";
+      }
 
-    @Override
-    protected String getJSMainModuleName() {
-      return "index";
-    }
-
-    @Override
-    protected JSIModulePackage getJSIModulePackage() {
-      return (JSIModulePackage) new CustomMMKVJSIModulePackage();
-    }
+      @Override
+      protected JSIModulePackage getJSIModulePackage() {
+        return (JSIModulePackage) new CustomMMKVJSIModulePackage();
+      }
   };
 
+  private final ReactNativeHost mNewArchitectureNativeHost =
+      new MainApplicationReactNativeHost(this);
+
   @Override
   public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      return mNewArchitectureNativeHost;
+    } else {
+      return mReactNativeHost;
+    }
   }
 
   @Override
@@ -118,6 +128,8 @@ private final ReactNativeHost mReactNativeHost =
     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());
   }

android/app/src/main/java/com/mattermost/rnbeta/NotificationReplyBroadcastReceiver.java

@@ -129,9 +129,8 @@ public class NotificationReplyBroadcastReceiver extends BroadcastReceiver {
     }
 
     private void recreateNotification(int notificationId, final CharSequence message) {
-        final Intent cta = new Intent(mContext, ProxyService.class);
         final PushNotificationProps notificationProps = new PushNotificationProps(bundle);
-        final PendingIntent pendingIntent = NotificationIntentAdapter.createPendingNotificationIntent(mContext, cta, notificationProps);
+        final PendingIntent pendingIntent = NotificationIntentAdapter.createPendingNotificationIntent(mContext, notificationProps);
         NotificationCompat.Builder builder = CustomPushNotificationHelper.createNotificationBuilder(mContext, pendingIntent, bundle, false);
         Notification notification =  builder.build();
         NotificationCompat.MessagingStyle messagingStyle = NotificationCompat.MessagingStyle.extractMessagingStyleFromNotification(notification);

android/app/src/main/jni/Android.mk

@@ -0,0 +1,48 @@
+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)

android/app/src/main/jni/MainApplicationModuleProvider.cpp

@@ -0,0 +1,24 @@
+#include "MainApplicationModuleProvider.h"
+
+#include <rncore.h>
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr<TurboModule> MainApplicationModuleProvider(
+    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
+  // is similar to the following (for a library called `samplelibrary`:
+  //
+  // auto module = samplelibrary_ModuleProvider(moduleName, params);
+  // if (module != nullptr) {
+  //    return module;
+  // }
+  // return rncore_ModuleProvider(moduleName, params);
+  return rncore_ModuleProvider(moduleName, params);
+}
+
+} // namespace react
+} // namespace facebook

android/app/src/main/jni/MainApplicationModuleProvider.h

@@ -0,0 +1,16 @@
+#pragma once
+
+#include <memory>
+#include <string>
+
+#include <ReactCommon/JavaTurboModule.h>
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr<TurboModule> MainApplicationModuleProvider(
+    const std::string moduleName,
+    const JavaTurboModule::InitParams &params);
+
+} // namespace react
+} // namespace facebook

android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp

@@ -0,0 +1,45 @@
+#include "MainApplicationTurboModuleManagerDelegate.h"
+#include "MainApplicationModuleProvider.h"
+
+namespace facebook {
+namespace react {
+
+jni::local_ref<MainApplicationTurboModuleManagerDelegate::jhybriddata>
+MainApplicationTurboModuleManagerDelegate::initHybrid(
+    jni::alias_ref<jhybridobject>) {
+  return makeCxxInstance();
+}
+
+void MainApplicationTurboModuleManagerDelegate::registerNatives() {
+  registerHybrid({
+      makeNativeMethod(
+          "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
+      makeNativeMethod(
+          "canCreateTurboModule",
+          MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
+  });
+}
+
+std::shared_ptr<TurboModule>
+MainApplicationTurboModuleManagerDelegate::getTurboModule(
+    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 JavaTurboModule::InitParams &params) {
+  return MainApplicationModuleProvider(name, params);
+}
+
+bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
+    std::string name) {
+  return getTurboModule(name, nullptr) != nullptr ||
+      getTurboModule(name, {.moduleName = name}) != nullptr;
+}
+
+} // namespace react
+} // namespace facebook

android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h

@@ -0,0 +1,38 @@
+#include <memory>
+#include <string>
+
+#include <ReactCommon/TurboModuleManagerDelegate.h>
+#include <fbjni/fbjni.h>
+
+namespace facebook {
+namespace react {
+
+class MainApplicationTurboModuleManagerDelegate
+    : public jni::HybridClass<
+          MainApplicationTurboModuleManagerDelegate,
+          TurboModuleManagerDelegate> {
+ public:
+  // Adapt it to the package you used for your Java class.
+  static constexpr auto kJavaDescriptor =
+      "Lcom/mattermost/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;
+  std::shared_ptr<TurboModule> getTurboModule(
+      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);
+};
+
+} // namespace react
+} // namespace facebook

android/app/src/main/jni/MainComponentsRegistry.cpp

@@ -0,0 +1,61 @@
+#include "MainComponentsRegistry.h"
+
+#include <CoreComponentsRegistry.h>
+#include <fbjni/fbjni.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/components/rncore/ComponentDescriptors.h>
+
+namespace facebook {
+namespace react {
+
+MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
+
+std::shared_ptr<ComponentDescriptorProviderRegistry const>
+MainComponentsRegistry::sharedProviderRegistry() {
+  auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+  // Custom Fabric Components go here. You can register custom
+  // components coming from your App or from 3rd party libraries here.
+  //
+  // providerRegistry->add(concreteComponentDescriptorProvider<
+  //        AocViewerComponentDescriptor>());
+  return providerRegistry;
+}
+
+jni::local_ref<MainComponentsRegistry::jhybriddata>
+MainComponentsRegistry::initHybrid(
+    jni::alias_ref<jclass>,
+    ComponentFactory *delegate) {
+  auto instance = makeCxxInstance(delegate);
+
+  auto buildRegistryFunction =
+      [](EventDispatcher::Weak const &eventDispatcher,
+         ContextContainer::Shared const &contextContainer)
+      -> ComponentDescriptorRegistry::Shared {
+    auto registry = MainComponentsRegistry::sharedProviderRegistry()
+                        ->createComponentDescriptorRegistry(
+                            {eventDispatcher, contextContainer});
+
+    auto mutableRegistry =
+        std::const_pointer_cast<ComponentDescriptorRegistry>(registry);
+
+    mutableRegistry->setFallbackComponentDescriptor(
+        std::make_shared<UnimplementedNativeViewComponentDescriptor>(
+            ComponentDescriptorParameters{
+                eventDispatcher, contextContainer, nullptr}));
+
+    return registry;
+  };
+
+  delegate->buildRegistryFunction = buildRegistryFunction;
+  return instance;
+}
+
+void MainComponentsRegistry::registerNatives() {
+  registerHybrid({
+      makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
+  });
+}
+
+} // namespace react
+} // namespace facebook

android/app/src/main/jni/MainComponentsRegistry.h

@@ -0,0 +1,32 @@
+#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

android/app/src/main/jni/OnLoad.cpp

@@ -0,0 +1,11 @@
+#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();
+  });
+}

android/build.gradle

@@ -2,16 +2,21 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "30.0.2"
+        buildToolsVersion = "31.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 30
-        targetSdkVersion = 30
-        supportLibVersion = "28.0.0"
+        compileSdkVersion = 31
+        targetSdkVersion = 31
+        supportLibVersion = "31.0.0"
         kotlinVersion = "1.5.30"
         firebaseVersion = "21.0.0"
         RNNKotlinVersion = kotlinVersion
-        ndkVersion = "21.4.7075529"
- 
+         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"
+        }
     }
     repositories {
         google()
@@ -19,7 +24,9 @@ buildscript {
         mavenLocal()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.2.2'
+        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.google.gms:google-services:4.3.10'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
 

android/gradle.properties

@@ -9,9 +9,8 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx1024m -XX:MaxPermSize=256m
-# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
-org.gradle.jvmargs=-Xmx2048M
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx1024m -XX:MaxMetaspaceSize=512m
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
@@ -30,4 +29,15 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.99.0
+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

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/bin/sh
 
 #
-# Copyright 2015 the original author or authors.
+# Copyright © 2015-2021 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,78 +17,113 @@
 #
 
 ##############################################################################
-##
-##  Gradle start up script for UN*X
-##
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
 ##############################################################################
 
 # Attempt to set APP_HOME
+
 # Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
 done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
+APP_BASE_NAME=${0##*/}
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
+MAX_FD=maximum
 
 warn () {
     echo "$*"
-}
+} >&2
 
 die () {
     echo
     echo "$*"
     echo
     exit 1
-}
+} >&2
 
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
 esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
         # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
+        JAVACMD=$JAVA_HOME/jre/sh/java
     else
-        JAVACMD="$JAVA_HOME/bin/java"
+        JAVACMD=$JAVA_HOME/bin/java
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -97,7 +132,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
-    JAVACMD="java"
+    JAVACMD=java
     which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
@@ -105,79 +140,95 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
 fi
 
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
 
 exec "$JAVACMD" "$@"

android/settings.gradle

@@ -3,3 +3,10 @@ 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')
+}

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,
               },

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": Array [
-        Object {
+      "transform": [
+        {
           "scale": 0,
         },
       ],
@@ -24,10 +24,10 @@ exports[`Fade should render {opacity: 1} 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
   pointerEvents="box-none"
   style={
-    Object {
+    {
       "opacity": 1,
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "scale": 1,
         },
       ],

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={Array []}
+  validMimeTypes={[]}
 />
 `;

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,

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={
-    Object {
-      "defaultFormats": Object {},
+    {
+      "defaultFormats": {},
       "defaultLocale": "en",
       "formatDate": [Function],
       "formatHTMLMessage": [Function],
@@ -18,8 +18,8 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
       "formatPlural": [Function],
       "formatRelative": [Function],
       "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
+      "formats": {},
+      "formatters": {
         "getDateTimeFormat": [Function],
         "getMessageFormat": [Function],
         "getNumberFormat": [Function],
@@ -27,7 +27,7 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
         "getRelativeFormat": [Function],
       },
       "locale": "en",
-      "messages": Object {},
+      "messages": {},
       "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={
-    Object {
-      "defaultFormats": Object {},
+    {
+      "defaultFormats": {},
       "defaultLocale": "en",
       "formatDate": [Function],
       "formatHTMLMessage": [Function],
@@ -84,8 +84,8 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
       "formatPlural": [Function],
       "formatRelative": [Function],
       "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
+      "formats": {},
+      "formatters": {
         "getDateTimeFormat": [Function],
         "getMessageFormat": [Function],
         "getNumberFormat": [Function],
@@ -93,7 +93,7 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
         "getRelativeFormat": [Function],
       },
       "locale": "en",
-      "messages": Object {},
+      "messages": {},
       "now": [Function],
       "onError": [Function],
       "textComponent": "span",
@@ -101,7 +101,7 @@ exports[`AnnouncementBanner should match snapshot 2`] = `
     }
   }
   theme={
-    Object {
+    {
       "awayIndicator": "#ffbc1f",
       "buttonBg": "#1c58d9",
       "buttonColor": "#ffffff",

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={Array []}
+    style={[]}
   >
     @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",
         },
       ]

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,
       }
     }

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';

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": Array [
+      "dataSource": [
         "+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,
       },
     ]

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": Array [
-        Object {
+      "dataSource": [
+        {
           "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,
       },
     ]

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,
       },
     ]

app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx

@@ -36,6 +36,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
         iconColor: {
             tintColor: theme.centerChannelColor,
         },
+        iconSize: {
+            width: 10,
+            height: 16,
+        },
         container: {
             flexDirection: 'row',
             alignItems: 'center',
@@ -100,18 +104,14 @@ const SlashSuggestionItem = (props: Props) => {
 
     let image = (
         <Image
-            style={style.iconColor}
-            width={10}
-            height={16}
+            style={[style.iconColor, style.iconSize]}
             source={slashIcon}
         />
     );
     if (props.icon === COMMAND_SUGGESTION_ERROR) {
         image = (
             <Image
-                style={style.iconColor}
-                width={10}
-                height={16}
+                style={[style.iconColor, style.iconSize]}
                 source={bangIcon}
             />
         );

app/components/autocomplete_selector/autocomplete_selector.tsx

@@ -204,6 +204,7 @@ 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';
@@ -233,6 +234,7 @@ export default class AutocompleteSelector extends PureComponent<Props, State> {
     });
 
     render() {
+        // @ts-expect-error context type definition
         const {intl} = this.context;
         const {
             placeholder,

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",

app/components/badge.js

@@ -1,6 +1,7 @@
 // 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 {
@@ -9,7 +10,6 @@ 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: Text.propTypes.style,
+        countStyle: TextPropTypes.style,
         minHeight: PropTypes.number,
         minWidth: PropTypes.number,
         isChannelItem: PropTypes.bool,

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",
       }
     }

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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "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={
-        Object {
-          "left": Object {
+        {
+          "left": {
             "color": "rgba(63,67,80,0.15)",
           },
         }

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,

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",

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)",
       }

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,
         },
       ]

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=""

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,

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`] = `
-<RNCSafeAreaView
+<ForwardRef
   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={
-                Object {
-                  "defaultMessage": "E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\"",
+                {
+                  "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={
-                Object {
-                  "defaultMessage": "E.g.: \\"A channel to file bugs and improvements\\"",
+                {
+                  "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={
-              Object {
-                "defaultMessage": "E.g.: \\"[Link Title](http://example.com)\\"",
+              {
+                "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>
-</RNCSafeAreaView>
+</ForwardRef>
 `;

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,
       },

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,

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",
           }
         }

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={
-      Object {
-        "borderBottom": Object {
+      {
+        "borderBottom": {
           "borderBottomColor": "rgba(63,67,80,0.08)",
           "borderBottomWidth": 1,
         },
-        "container": Object {
+        "container": {
           "flex": 1,
         },
-        "headerContainer": Object {
+        "headerContainer": {
           "alignItems": "center",
           "flexDirection": "row",
         },
-        "listScrollIndicator": Object {
+        "listScrollIndicator": {
           "right": 1,
         },
-        "loadingMoreContainer": Object {
+        "loadingMoreContainer": {
           "paddingVertical": 12,
         },
-        "markAllReadIcon": Object {
+        "markAllReadIcon": {
           "color": "rgba(63,67,80,0.56)",
           "fontSize": 28,
           "lineHeight": 28,
         },
-        "markAllReadIconContainer": Object {
+        "markAllReadIconContainer": {
           "paddingHorizontal": 20,
         },
-        "markAllReadIconDisabled": Object {
+        "markAllReadIconDisabled": {
           "opacity": 0.5,
         },
-        "menuContainer": Object {
+        "menuContainer": {
           "alignItems": "center",
           "flexDirection": "row",
           "flexGrow": 1,
           "marginVertical": 12,
           "paddingLeft": 12,
         },
-        "menuItem": Object {
+        "menuItem": {
           "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": Object {
+        "menuItemContainer": {
           "paddingHorizontal": 16,
           "paddingVertical": 8,
         },
-        "menuItemContainerSelected": Object {
+        "menuItemContainerSelected": {
           "backgroundColor": "rgba(28,88,217,0.08)",
           "borderRadius": 4,
         },
-        "menuItemSelected": Object {
+        "menuItemSelected": {
           "color": "#1c58d9",
         },
-        "messagesContainer": Object {
+        "messagesContainer": {
           "flexGrow": 1,
         },
-        "unreadsDot": Object {
+        "unreadsDot": {
           "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={
-            Object {
-              "defaultFormats": Object {},
+            {
+              "defaultFormats": {},
               "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": Object {},
-              "formatters": Object {
+              "formats": {},
+              "formatters": {
                 "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": Object {},
+              "messages": {},
               "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,
         }
       }

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} from 'react-native';
+import {FlatList, NativeSyntheticEvent, NativeScrollEvent, Platform, View, ListRenderItemInfo} 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) => item, []);
+    const keyExtractor = React.useCallback((item: string) => item, []);
 
-    const renderPost = React.useCallback(({item}) => {
+    const renderPost = React.useCallback(({item}: ListRenderItemInfo<string>) => {
         return (
             <ThreadItem
                 testID={testID}

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,
           ]
         }

app/components/load_more_posts/load_more_posts.js

@@ -1,9 +1,10 @@
 // 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, ViewPropTypes} from 'react-native';
+import {ActivityIndicator, Platform, View} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
 import TouchableWithFeedback from '@components/touchable_with_feedback';

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 {

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

@@ -2,7 +2,7 @@
 
 exports[`Markdown should match snapshot 1`] = `
 <Unknown
-  context={Array []}
+  context={[]}
   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={Array []}
+  context={[]}
   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",

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",
     }
   }

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,
           }

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%",
         },
       ]

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

@@ -2,7 +2,7 @@
 
 exports[`MarkdownEmoji should match snapshot 1`] = `
 <Unknown
-  context={Array []}
+  context={[]}
   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={Array []}
+  context={[]}
   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",
         ]

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,
         },
       ]

app/components/markdown/markdown_table_image/markdown_table_image.tsx

@@ -114,8 +114,6 @@ 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>

app/components/markdown/transform.test.js

@@ -3100,50 +3100,6 @@ 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:
 // {

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={true}
+          focusable={false}
           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,

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={
-    Object {
-      "defaultFormats": Object {},
+    {
+      "defaultFormats": {},
       "defaultLocale": "en",
       "formatDate": [Function],
       "formatHTMLMessage": [Function],
@@ -14,8 +14,8 @@ exports[`PostDraft Archived should match snapshot 1`] = `
       "formatPlural": [Function],
       "formatRelative": [Function],
       "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
+      "formats": {},
+      "formatters": {
         "getDateTimeFormat": [Function],
         "getMessageFormat": [Function],
         "getNumberFormat": [Function],
@@ -23,7 +23,7 @@ exports[`PostDraft Archived should match snapshot 1`] = `
         "getRelativeFormat": [Function],
       },
       "locale": "en",
-      "messages": Object {},
+      "messages": {},
       "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",

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,

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",

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,

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,

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,

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,

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`] = `
-<RNCSafeAreaView
+<ForwardRef
   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>
-</RNCSafeAreaView>
+</ForwardRef>
 `;

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,

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",

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,

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

@@ -7,8 +7,8 @@ exports[`PostList should match snapshot 1`] = `
   deepLinkURL=""
   handleSelectChannelByName={[MockFunction]}
   intl={
-    Object {
-      "defaultFormats": Object {},
+    {
+      "defaultFormats": {},
       "defaultLocale": "en",
       "formatDate": [Function],
       "formatHTMLMessage": [Function],
@@ -17,8 +17,8 @@ exports[`PostList should match snapshot 1`] = `
       "formatPlural": [Function],
       "formatRelative": [Function],
       "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
+      "formats": {},
+      "formatters": {
         "getDateTimeFormat": [Function],
         "getMessageFormat": [Function],
         "getNumberFormat": [Function],
@@ -26,7 +26,7 @@ exports[`PostList should match snapshot 1`] = `
         "getRelativeFormat": [Function],
       },
       "locale": "en",
-      "messages": Object {},
+      "messages": {},
       "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",

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={
-        Object {
-          "defaultFormats": Object {},
+        {
+          "defaultFormats": {},
           "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": Object {},
-          "formatters": Object {
+          "formats": {},
+          "formatters": {
             "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": Object {},
+          "messages": {},
           "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={
-        Object {
-          "defaultFormats": Object {},
+        {
+          "defaultFormats": {},
           "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": Object {},
-          "formatters": Object {
+          "formats": {},
+          "formatters": {
             "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": Object {},
+          "messages": {},
           "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={
-        Object {
-          "defaultFormats": Object {},
+        {
+          "defaultFormats": {},
           "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": Object {},
-          "formatters": Object {
+          "formats": {},
+          "formatters": {
             "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": Object {},
+          "messages": {},
           "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={
-        Object {
-          "defaultFormats": Object {},
+        {
+          "defaultFormats": {},
           "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": Object {},
-          "formatters": Object {
+          "formats": {},
+          "formatters": {
             "getDateTimeFormat": [Function],
             "getMessageFormat": [Function],
             "getNumberFormat": [Function],
@@ -401,7 +401,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
             "getRelativeFormat": [Function],
           },
           "locale": "en",
-          "messages": Object {},
+          "messages": {},
           "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={
-        Object {
-          "defaultFormats": Object {},
+        {
+          "defaultFormats": {},
           "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": Object {},
-          "formatters": Object {
+          "formats": {},
+          "formatters": {
             "getDateTimeFormat": [Function],
             "getMessageFormat": [Function],
             "getNumberFormat": [Function],
@@ -513,7 +513,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
             "getRelativeFormat": [Function],
           },
           "locale": "en",
-          "messages": Object {},
+          "messages": {},
           "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,

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,
       },
-      Object {
-        "transform": Array [
-          Object {
+      {
+        "transform": [
+          {
             "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": Object {
+            "shadowOffset": {
               "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,

app/components/post_list/more_messages_button/more_messages_button.tsx

@@ -317,6 +317,8 @@ 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;
 

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,
       }

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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @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={Array []}
+        style={[]}
       >
         @username
       </Text>
     </Text>
     <Text
       style={
-        Object {
+        {
           "color": "rgba(63,67,80,0.6)",
           "fontSize": 15,
           "lineHeight": 20,

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, NativeScrollEvent, NativeSyntheticEvent, Platform, StyleSheet, ViewToken} from 'react-native';
+import {DeviceEventEmitter, FlatList, ListRenderItemInfo, 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) => {
+    const registerViewableItemsListener = useCallback((listener: any) => {
         onViewableItemsChangedListener.current = listener;
         const removeListener = () => {
             onViewableItemsChangedListener.current = undefined;
@@ -113,7 +113,7 @@ const PostList = ({
         return removeListener;
     }, []);
 
-    const registerScrollEndIndexListener = useCallback((listener) => {
+    const registerScrollEndIndexListener = useCallback((listener: any) => {
         onScrollEndIndexListener.current = listener;
         const removeListener = () => {
             onScrollEndIndexListener.current = undefined;
@@ -122,7 +122,7 @@ const PostList = ({
         return removeListener;
     }, []);
 
-    const keyExtractor = useCallback((item) => {
+    const keyExtractor = useCallback((item: string) => {
         // All keys are strings (either post IDs or special keys)
         return item;
     }, []);
@@ -173,7 +173,7 @@ const PostList = ({
         }
     }, []);
 
-    const renderItem = useCallback(({item, index}) => {
+    const renderItem = useCallback(({item, index}: ListRenderItemInfo<string>) => {
         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.

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,
         },
       ]

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",

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",
           }
         }

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={
-        Object {
-          "buttonTextStyle": Object {
+        {
+          "buttonTextStyle": {
             "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,
               },

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,
     }
   }

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,

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={Array []}
-  channels={Object {}}
-  currentChannel={Object {}}
-  currentTeam={Object {}}
+  archivedChannels={[]}
+  channels={{}}
+  currentChannel={{}}
+  currentTeam={{}}
   currentUserId="current-user-id"
-  groupChannelMemberDetails={Object {}}
+  groupChannelMemberDetails={{}}
   intl={
-    Object {
-      "defaultFormats": Object {},
+    {
+      "defaultFormats": {},
       "defaultLocale": "en",
       "formatDate": [Function],
       "formatHTMLMessage": [Function],
@@ -27,8 +27,8 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
       "formatPlural": [Function],
       "formatRelative": [Function],
       "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
+      "formats": {},
+      "formatters": {
         "getDateTimeFormat": [Function],
         "getMessageFormat": [Function],
         "getNumberFormat": [Function],
@@ -36,7 +36,7 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
         "getRelativeFormat": [Function],
       },
       "locale": "en",
-      "messages": Object {},
+      "messages": {},
       "now": [Function],
       "onError": [Function],
       "textComponent": "span",
@@ -45,19 +45,19 @@ exports[`ChannelsList FilteredList should match snapshot 1`] = `
   }
   isLandscape={false}
   onSelectChannel={[MockFunction]}
-  otherChannels={Array []}
-  pastDirectMessages={Array []}
-  profiles={Object {}}
+  otherChannels={[]}
+  pastDirectMessages={[]}
+  profiles={{}}
   restrictDms={false}
-  searchOrder={Array []}
-  statuses={Object {}}
-  styles={Object {}}
-  teamProfiles={Object {}}
+  searchOrder={[]}
+  statuses={{}}
+  styles={{}}
+  teamProfiles={{}}
   teammateNameDisplay="teammate-name-display"
   term="term"
   testID="main.sidebar.channels_list.filtered_list"
   theme={
-    Object {
+    {
       "awayIndicator": "#ffbc1f",
       "buttonBg": "#1c58d9",
       "buttonColor": "#ffffff",

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={Array []}
+    sections={[]}
     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={Array []}
+    sections={[]}
     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={Array []}
+    sections={[]}
     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",

app/components/sidebars/main/channels_list/list/index.js

@@ -1,5 +1,6 @@
 // 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';
@@ -12,10 +13,9 @@ import {
     getOrderedChannelIds,
     getCurrentChannelId,
 } from '@mm-redux/selectors/entities/channels';
-import {getTheme, getFavoritesPreferences, getSidebarPreferences, isCollapsedThreadsEnabled} from '@mm-redux/selectors/entities/preferences';
+import {getTheme, 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,14 +87,4 @@ function mapStateToProps(state) {
     };
 }
 
-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);
+export default connect(mapStateToProps)(List);

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,