[FIX] Keyboard not showing all emojis or showing cut emojis (#4919)

* fix the logic based on window width and make the keyboard dynamic

* fix var naming and math

* fix alignment of emojis

* add comment

* wip

.circleci/config.yml

@@ -1,9 +1,12 @@
 defaults: &defaults
   working_directory: ~/repo
 
+orbs:
+  android: circleci/android@2.1.2
+
 macos: &macos
   macos:
-    xcode: "13.3.0"
+    xcode: "14.2.0"
   resource_class: large
 
 bash-env: &bash-env
@@ -51,14 +54,14 @@ save-gems-cache: &save-gems-cache
 update-fastlane-ios: &update-fastlane-ios
   name: Update Fastlane
   command: |
-    echo "ruby-2.6.4" > ~/.ruby-version
+    echo "ruby-2.7.7" > ~/.ruby-version
     bundle install
   working_directory: ios
 
 update-fastlane-android: &update-fastlane-android
   name: Update Fastlane
   command: |
-    echo "ruby-2.6.4" > ~/.ruby-version
+    echo "ruby-2.7.7" > ~/.ruby-version
     bundle install
   working_directory: android
 
@@ -118,26 +121,26 @@ commands:
             if [[ $CIRCLE_JOB == "android-build-official" ]]; then
               echo -e "APPLICATION_ID=chat.rocket.android" >> ./gradle.properties
               echo -e "BugsnagAPIKey=$BUGSNAG_KEY_OFFICIAL" >> ./gradle.properties
-              echo $CHAT_ROCKET_ANDROID_STORE_FILE_BASE64_JKS | base64 --decode > ./app/$KEYSTORE_OFFICIAL
+              echo $KEYSTORE_OFFICIAL_BASE64 | base64 --decode > ./app/$KEYSTORE_OFFICIAL
               echo -e "KEYSTORE=$KEYSTORE_OFFICIAL" >> ./gradle.properties
-              echo -e "KEYSTORE_PASSWORD=$CHAT_ROCKET_ANDROID_STORE_PASSWORD" >> ./gradle.properties
-              echo -e "KEY_ALIAS=$CHAT_ROCKET_ANDROID_KEY_ALIAS" >> ./gradle.properties
-              echo -e "KEY_PASSWORD=$CHAT_ROCKET_ANDROID_KEY_PASSWORD" >> ./gradle.properties
+              echo -e "KEYSTORE_PASSWORD=$KEYSTORE_OFFICIAL_PASSWORD" >> ./gradle.properties
+              echo -e "KEY_ALIAS=$KEYSTORE_OFFICIAL_ALIAS" >> ./gradle.properties
+              echo -e "KEY_PASSWORD=$KEYSTORE_OFFICIAL_PASSWORD" >> ./gradle.properties
             else
               echo -e "APPLICATION_ID=chat.rocket.reactnative" >> ./gradle.properties
               echo -e "BugsnagAPIKey=$BUGSNAG_KEY" >> ./gradle.properties
-              echo $KEYSTORE_BASE64 | base64 --decode > ./app/$KEYSTORE
-              echo -e "KEYSTORE=$KEYSTORE" >> ./gradle.properties
-              echo -e "KEYSTORE_PASSWORD=$KEYSTORE_PASSWORD" >> ./gradle.properties
-              echo -e "KEY_ALIAS=$KEY_ALIAS" >> ./gradle.properties
-              echo -e "KEY_PASSWORD=$KEYSTORE_PASSWORD" >> ./gradle.properties
+              echo $KEYSTORE_EXPERIMENTAL_BASE64 | base64 --decode > ./app/$KEYSTORE_EXPERIMENTAL
+              echo -e "KEYSTORE=$KEYSTORE_EXPERIMENTAL" >> ./gradle.properties
+              echo -e "KEYSTORE_PASSWORD=$KEYSTORE_EXPERIMENTAL_PASSWORD" >> ./gradle.properties
+              echo -e "KEY_ALIAS=$KEYSTORE_EXPERIMENTAL_ALIAS" >> ./gradle.properties
+              echo -e "KEY_PASSWORD=$KEYSTORE_EXPERIMENTAL_PASSWORD" >> ./gradle.properties
             fi
           working_directory: android
 
       - run:
           name: Set Google Services
           command: |
-            if [[ $KEYSTORE ]]; then
+            if [[ $GOOGLE_SERVICES_ANDROID ]]; then
               echo $GOOGLE_SERVICES_ANDROID | base64 --decode > google-services.json
             fi
           working_directory: android/app
@@ -151,7 +154,7 @@ commands:
             if [[ $CIRCLE_JOB == "android-build-experimental" || "android-automatic-build-experimental" ]]; then
               ./gradlew bundleExperimentalPlayRelease
             fi
-            if [[ ! $KEYSTORE ]]; then
+            if [[ ! $GOOGLE_SERVICES_ANDROID ]]; then
               ./gradlew assembleExperimentalPlayDebug
             fi
           working_directory: android
@@ -200,8 +203,12 @@ commands:
       - run:
           name: Set Google Services
           command: |
-            if [[ $KEYSTORE ]]; then
-              echo $GOOGLE_SERVICES_IOS | base64 --decode > GoogleService-Info.plist
+            if [[ $APP_STORE_CONNECT_API_KEY_BASE64 ]]; then
+              if [[ $CIRCLE_JOB == "ios-build-official" ]]; then
+                echo $GOOGLE_SERVICES_IOS | base64 --decode > GoogleService-Info.plist
+              else 
+                echo $GOOGLE_SERVICES_IOS_EXPERIMENTAL | base64 --decode > GoogleService-Info.plist
+              fi
             fi
           working_directory: ios
       - run:
@@ -223,12 +230,12 @@ commands:
               /usr/libexec/PlistBuddy -c "Set IS_OFFICIAL NO" ./NotificationService/Info.plist
             fi
 
-            if [[ $APP_STORE_CONNECT_API_BASE64 ]]; then
-              echo $APP_STORE_CONNECT_API_BASE64 | base64 --decode > ./fastlane/app_store_connect_api_key.p8
+            if [[ $APP_STORE_CONNECT_API_KEY_BASE64 ]]; then
+              echo $APP_STORE_CONNECT_API_KEY_BASE64 | base64 --decode > ./fastlane/app_store_connect_api_key.p8
               if [[ $CIRCLE_JOB == "ios-build-official" ]]; then
                 bundle exec fastlane ios build_official
               else
-                if [[ $KEYSTORE ]]; then
+                if [[ $APP_STORE_CONNECT_API_KEY_BASE64 ]]; then
                   bundle exec fastlane ios build_experimental
                 else
                   bundle exec fastlane ios build_fork
@@ -318,11 +325,19 @@ commands:
       - run:
           name: Fastlane Tesflight Upload
           command: |
-            echo $APP_STORE_CONNECT_API_BASE64 | base64 --decode > ./fastlane/app_store_connect_api_key.p8
+            echo $APP_STORE_CONNECT_API_KEY_BASE64 | base64 --decode > ./fastlane/app_store_connect_api_key.p8
             bundle exec fastlane ios beta official:<< parameters.official >>
           working_directory: ios
       - save_cache: *save-gems-cache
 
+  create-e2e-account-file:
+    description: "Create e2e account file"
+    steps:
+      - run:
+          command: |
+            echo $E2E_ACCOUNT | base64 --decode > ./e2e_account.ts
+          working_directory: e2e
+
 version: 2.1
 
 # EXECUTORS
@@ -345,26 +360,26 @@ jobs:
     steps:
       - checkout
 
-      # - restore_cache: *restore-npm-cache-linux
+      - restore_cache: *restore-npm-cache-linux
 
-      # - run: *install-npm-modules
+      - run: *install-npm-modules
 
-      # - run:
-      #     name: Lint
-      #     command: |
-      #       yarn lint
+      - run:
+          name: Lint
+          command: |
+            yarn lint
 
-      # - run:
-      #     name: Test
-      #     command: |
-      #       yarn test -w 8
+      - run:
+          name: Test
+          command: |
+            yarn test -w 8
 
-      # - run:
-      #     name: Codecov
-      #     command: |
-      #       yarn codecov
+      - run:
+          name: Codecov
+          command: |
+            yarn codecov
 
-      # - save_cache: *save-npm-cache-linux
+      - save_cache: *save-npm-cache-linux
 
   # Android builds
   android-build-experimental:
@@ -434,6 +449,94 @@ jobs:
       - upload-to-google-play-beta:
           official: true
 
+  e2e-build-android:
+    <<: *defaults
+    executor:
+      name: android/android-machine
+      resource-class: xlarge
+      tag: 2022.12.1
+    environment:
+      <<: *android-env
+    steps:
+      - checkout
+      - restore_cache: *restore-npm-cache-linux
+      - run: *install-npm-modules
+      - save_cache: *save-npm-cache-linux
+      - restore_cache: *restore-gradle-cache
+      - run:
+          name: Configure Gradle
+          command: |
+            echo -e "" > ./gradle.properties
+            # echo -e "android.enableAapt2=false" >> ./gradle.properties
+            echo -e "android.useAndroidX=true" >> ./gradle.properties
+            echo -e "android.enableJetifier=true" >> ./gradle.properties
+            echo -e "newArchEnabled=false" >> ./gradle.properties
+            echo -e "FLIPPER_VERSION=0.125.0" >> ./gradle.properties
+            echo -e "VERSIONCODE=$CIRCLE_BUILD_NUM" >> ./gradle.properties
+            echo -e "APPLICATION_ID=chat.rocket.reactnative" >> ./gradle.properties
+            echo -e "BugsnagAPIKey=$BUGSNAG_KEY" >> ./gradle.properties
+            echo $KEYSTORE_EXPERIMENTAL_BASE64 | base64 --decode > ./app/$KEYSTORE_EXPERIMENTAL
+            echo -e "KEYSTORE=$KEYSTORE_EXPERIMENTAL" >> ./gradle.properties
+            echo -e "KEYSTORE_PASSWORD=$KEYSTORE_EXPERIMENTAL_PASSWORD" >> ./gradle.properties
+            echo -e "KEY_ALIAS=$KEYSTORE_EXPERIMENTAL_ALIAS" >> ./gradle.properties
+            echo -e "KEY_PASSWORD=$KEYSTORE_EXPERIMENTAL_PASSWORD" >> ./gradle.properties
+          working_directory: android
+      - run:
+          name: Build Android
+          command: |
+            echo "RUNNING_E2E_TESTS=true" > ./.env
+            yarn e2e:android-build
+      - save_cache: *save-gradle-cache
+      - store_artifacts:
+          path: android/app/build/outputs/apk/experimentalPlay/release/app-experimental-play-release.apk
+      - store_artifacts:
+          path: android/app/build/outputs/apk/androidTest/experimentalPlay/release/app-experimental-play-release-androidTest.apk
+      - persist_to_workspace:
+          root: /home/circleci/repo
+          paths:
+            - android/app/build/outputs/apk/
+
+  e2e-test-android:
+    <<: *defaults
+    executor:
+      name: android/android-machine
+      resource-class: xlarge
+      tag: 2022.12.1
+    parallelism: 4
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /home/circleci/repo
+      - restore_cache: *restore-npm-cache-linux
+      - run: *install-npm-modules
+      - save_cache: *save-npm-cache-linux
+      - run: mkdir ~/junit
+      - create-e2e-account-file
+      - android/create-avd:
+          avd-name: Pixel_API_31_AOSP
+          install: true
+          system-image: system-images;android-31;default;x86_64
+      - run:
+          name: Setup emulator
+          command: |
+            echo "hw.lcd.density = 440" >> ~/.android/avd/Pixel_API_31_AOSP.avd/config.ini
+            echo "hw.lcd.height = 2280" >> ~/.android/avd/Pixel_API_31_AOSP.avd/config.ini
+            echo "hw.lcd.width = 1080" >> ~/.android/avd/Pixel_API_31_AOSP.avd/config.ini
+      - run:
+          name: Run Detox Tests
+          command: |
+            TEST=$(circleci tests glob "e2e/tests/**/*.ts" | circleci tests split --split-by=timings)
+            yarn e2e:android-test $TEST
+      - store_artifacts:
+          path: artifacts
+      - run:
+          command: cp junit.xml ~/junit/
+          when: always
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
   # iOS builds
   ios-build-experimental:
     executor: mac-env
@@ -457,11 +560,89 @@ jobs:
       - upload-to-testflight:
           official: true
 
+  e2e-build-ios:
+    executor: mac-env
+    steps:
+      - checkout
+      - restore_cache: *restore-gems-cache
+      - restore_cache: *restore-npm-cache-mac
+      - run: *install-npm-modules
+      - run: *update-fastlane-ios
+      - save_cache: *save-npm-cache-mac
+      - save_cache: *save-gems-cache
+      - manage-pods
+      - run:
+          name: Configure Detox
+          command: |
+            brew tap wix/brew
+            brew install applesimutils
+      - run:
+          name: Build
+          command: |
+            /usr/libexec/PlistBuddy -c "Set :bugsnag:apiKey $BUGSNAG_KEY" ./ios/RocketChatRN/Info.plist
+            /usr/libexec/PlistBuddy -c "Set :bugsnag:apiKey $BUGSNAG_KEY" ./ios/ShareRocketChatRN/Info.plist
+            yarn detox clean-framework-cache && yarn detox build-framework-cache
+            echo "RUNNING_E2E_TESTS=true" > ./.env
+            yarn e2e:ios-build
+      - persist_to_workspace:
+          root: /Users/distiller/project
+          paths:
+            - ios/build/Build/Products/Release-iphonesimulator/Rocket.Chat Experimental.app
+  
+  e2e-test-ios:
+    executor: mac-env
+    parallelism: 5
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /Users/distiller/project
+      - restore_cache: *restore-npm-cache-mac
+      - run: *install-npm-modules
+      - save_cache: *save-npm-cache-mac
+      - run: mkdir ~/junit
+      - run:
+          name: Configure Detox
+          command: |
+            brew tap wix/brew
+            brew install applesimutils
+            yarn detox clean-framework-cache && yarn detox build-framework-cache
+      - create-e2e-account-file
+      - run:
+          name: Run tests
+          command: |
+            TEST=$(circleci tests glob "e2e/tests/**/*.ts" | circleci tests split --split-by=timings)
+            yarn e2e:ios-test $TEST
+      - store_artifacts:
+          path: artifacts
+      - run:
+          command: cp junit.xml ~/junit/
+          when: always
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
 workflows:
   build-and-test:
     jobs:
       - lint-testunit
 
+      # E2E tests
+      - e2e-hold:
+          type: approval
+      - e2e-build-ios:
+          requires:
+            - e2e-hold
+      - e2e-test-ios:
+          requires:
+            - e2e-build-ios
+      - e2e-build-android:
+          requires:
+            - e2e-hold
+      - e2e-test-android:
+          requires:
+            - e2e-build-android
+
       # iOS Experimental
       - ios-hold-build-experimental:
           type: approval

.detoxrc.js

@@ -0,0 +1,91 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+	testRunner: {
+		args: {
+			$0: 'jest',
+			config: 'e2e/jest.config.js'
+		},
+		retries: process.env.CI ? 3 : 0
+	},
+	artifacts: {
+		plugins: {
+			screenshot: 'failing',
+			video: 'failing',
+			uiHierarchy: 'enabled'
+		}
+	},
+	apps: {
+		'ios.debug': {
+			type: 'ios.app',
+			binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/Rocket.Chat Experimental.app',
+			build:
+				'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
+		},
+		'ios.release': {
+			type: 'ios.app',
+			binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/Rocket.Chat Experimental.app',
+			build:
+				'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
+		},
+		'android.debug': {
+			type: 'android.apk',
+			binaryPath: 'android/app/build/outputs/apk/experimentalPlay/debug/app-experimental-play-debug.apk',
+			build:
+				'cd android ; ./gradlew assembleExperimentalPlayDebug assembleExperimentalPlayDebugAndroidTest -DtestBuildType=debug ; cd -',
+			reversePorts: [8081]
+		},
+		'android.release': {
+			type: 'android.apk',
+			binaryPath: 'android/app/build/outputs/apk/experimentalPlay/release/app-experimental-play-release.apk',
+			build:
+				'cd android ; ./gradlew assembleExperimentalPlayRelease assembleExperimentalPlayReleaseAndroidTest -DtestBuildType=release ; cd -'
+		}
+	},
+	devices: {
+		simulator: {
+			type: 'ios.simulator',
+			device: {
+				type: 'iPhone 14'
+			}
+		},
+		attached: {
+			type: 'android.attached',
+			device: {
+				adbName: '.*'
+			}
+		},
+		emulator: {
+			type: 'android.emulator',
+			device: {
+				avdName: 'Pixel_API_31_AOSP'
+			},
+			headless: process.env.CI ? true : false
+		}
+	},
+	configurations: {
+		'ios.sim.debug': {
+			device: 'simulator',
+			app: 'ios.debug'
+		},
+		'ios.sim.release': {
+			device: 'simulator',
+			app: 'ios.release'
+		},
+		'android.att.debug': {
+			device: 'attached',
+			app: 'android.debug'
+		},
+		'android.att.release': {
+			device: 'attached',
+			app: 'android.release'
+		},
+		'android.emu.debug': {
+			device: 'emulator',
+			app: 'android.debug'
+		},
+		'android.emu.release': {
+			device: 'emulator',
+			app: 'android.release'
+		}
+	}
+};

.env

@@ -0,0 +1,2 @@
+# DON'T COMMIT THIS FILE
+RUNNING_E2E_TESTS=

.eslintrc.js

@@ -240,19 +240,8 @@ module.exports = {
 		},
 		{
 			files: ['e2e/**'],
-			globals: {
-				by: true,
-				detox: true,
-				device: true,
-				element: true,
-				waitFor: true
-			},
 			rules: {
-				'import/no-extraneous-dependencies': 0,
-				'no-await-in-loop': 0,
-				'no-restricted-syntax': 0,
-				// TODO: remove this rule when update Detox to 20 and test if the namespace Detox is available
-				'no-undef': 1
+				'no-await-in-loop': 0
 			}
 		}
 	]

.gitignore

@@ -67,5 +67,6 @@ e2e/docker/rc_test_env/docker-compose.yml
 e2e/docker/data/db
 e2e/e2e_account.js
 e2e/e2e_account.ts
+junit.xml
 
 *.p8

.ruby-version

@@ -1 +1 @@
-2.7.4
+2.7.7

Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.4'
+ruby '2.7.7'
 gem 'cocoapods', '~> 1.11', '>= 1.11.2'

android/app/build.gradle

@@ -147,7 +147,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.35.0"
+        versionName "4.37.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]
@@ -250,6 +250,7 @@ android {
         release {
             minifyEnabled enableProguardInReleaseBuilds
             setProguardFiles([getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'])
+            proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
             signingConfig signingConfigs.release
             if (!isFoss) {
                 firebaseCrashlytics {
@@ -268,6 +269,11 @@ android {
     //     pickFirst '**/x86_64/libc++_shared.so'
     // }
 
+    // FIXME: Remove when we update RN
+    packagingOptions {
+        pickFirst '**/*.so'
+    }
+
     // applicationVariants are e.g. debug, release
 
     flavorDimensions "app", "type"
@@ -280,10 +286,6 @@ android {
             dimension = "app"
             buildConfigField "boolean", "IS_OFFICIAL", "false"
         }
-        e2e {
-            dimension = "app"
-            buildConfigField "boolean", "IS_OFFICIAL", "false"
-        }
         foss {
             dimension = "type"
             buildConfigField "boolean", "FDROID_BUILD", "true"
@@ -311,16 +313,6 @@ android {
             java.srcDirs = ['src/main/java', 'src/play/java']
             manifest.srcFile 'src/play/AndroidManifest.xml'
         }
-        e2ePlayDebug {
-            java.srcDirs = ['src/main/java', 'src/play/java']
-            res.srcDirs = ['src/experimental/res']
-            manifest.srcFile 'src/play/AndroidManifest.xml'
-        }
-        e2ePlayRelease {
-            java.srcDirs = ['src/main/java', 'src/play/java']
-            res.srcDirs = ['src/experimental/res']
-            manifest.srcFile 'src/play/AndroidManifest.xml'
-        }
     }
 
     applicationVariants.all { variant ->
@@ -385,8 +377,9 @@ dependencies {
     implementation "com.github.bumptech.glide:glide:4.9.0"
     annotationProcessor "com.github.bumptech.glide:compiler:4.9.0"
     implementation "com.tencent:mmkv-static:1.2.10"
-    androidTestImplementation('com.wix:detox:+') { transitive = true }
-    androidTestImplementation 'junit:junit:4.12'
+    androidTestImplementation('com.wix:detox:+')
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation 'com.facebook.soloader:soloader:0.10.4'
 }
 
 if (isNewArchitectureEnabled()) {

android/app/src/androidTest/java/chat/rocket/reactnative/DetoxTest.java

@@ -18,7 +18,7 @@ public class DetoxTest {
     @Rule
     // Replace 'MainActivity' with the value of android:name entry in 
     // <activity> in AndroidManifest.xml
-    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+    public ActivityTestRule<chat.rocket.reactnative.MainActivity> mActivityRule = new ActivityTestRule<>(chat.rocket.reactnative.MainActivity.class, false, false);
 
     @Test
     public void runDetoxTests() {

android/app/src/debug/java/chat/rocket/reactnative/MainDebugApplication.java

@@ -1,25 +0,0 @@
-package chat.rocket.reactnative;
-
-import android.content.Context;
-
-import com.facebook.react.ReactInstanceManager;
-
-public class MainDebugApplication extends MainApplication  {
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
-  }
-
-  /**
-   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
-   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
-   *
-   * @param context
-   * @param reactInstanceManager
-   */
-  private static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    ReactNativeFlipper.initializeFlipper(context, reactInstanceManager);
-  }
-}

android/app/src/e2e/res/xml/network_security_config.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<network-security-config xmlns:tools="http://schemas.android.com/tools">
-	<base-config cleartextTrafficPermitted="true">
-		<trust-anchors>
-			<certificates src="system" />
-			<certificates src="user"
-				tools:ignore="AcceptsUserCertificates" />
-		</trust-anchors>
-	</base-config>
-</network-security-config>

android/app/src/main/AndroidManifest.xml

@@ -11,6 +11,9 @@
     <uses-permission android:name="android.permission.VIDEO_CAPTURE" />
     <uses-permission android:name="android.permission.AUDIO_CAPTURE" />
 
+    <!-- permissions related to jitsi call -->
+    <uses-permission android:name="android.permission.BLUETOOTH" />
+    
     <application
         android:name="chat.rocket.reactnative.MainApplication"
         android:allowBackup="false"

android/app/src/main/java/chat/rocket/reactnative/MainApplication.java

@@ -9,13 +9,16 @@ import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.config.ReactFeatureFlags;
+import com.facebook.react.ReactInstanceManager;
 import com.facebook.soloader.SoLoader;
 import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
 import com.facebook.react.bridge.JSIModulePackage;
 import com.swmansion.reanimated.ReanimatedJSIModulePackage;
+import android.content.Context;
 import android.content.res.Configuration;
 import expo.modules.ApplicationLifecycleDispatcher;
 import expo.modules.ReactNativeHostWrapper;
+import java.lang.reflect.InvocationTargetException;
 
 import java.util.Arrays;
 import java.util.List;
@@ -76,6 +79,7 @@ public class MainApplication extends Application implements ReactApplication {
     // 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());
     ApplicationLifecycleDispatcher.onApplicationCreate(this);
   }
 
@@ -84,4 +88,35 @@ public class MainApplication extends Application implements ReactApplication {
     super.onConfigurationChanged(newConfig);
     ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
   }
+
+  /**
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   *
+   * @param context
+   * @param reactInstanceManager
+   */
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
+    if (BuildConfig.DEBUG) {
+      try {
+        /*
+         We use reflection here to pick up the class that initializes Flipper,
+        since Flipper library is not available in release mode
+        */
+        Class<?> aClass = Class.forName("chat.rocket.reactnative.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
+      } catch (ClassNotFoundException e) {
+        e.printStackTrace();
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
+      }
+    }
+  }
 }

android/app/src/main/res/xml/network_security_config.xml

@@ -7,4 +7,8 @@
                 tools:ignore="AcceptsUserCertificates" />
         </trust-anchors>
     </base-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">10.0.2.2</domain>
+        <domain includeSubdomains="true">localhost</domain>
+	</domain-config>
 </network-security-config>

android/build.gradle

@@ -1,9 +1,5 @@
 import org.apache.tools.ant.taskdefs.condition.Os
 
-def safeExtGet(prop, fallback) {
-    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
-}
-
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 buildscript {
     def taskRequests = getGradle().getStartParameter().getTaskRequests().toString().toLowerCase()
@@ -75,5 +71,38 @@ allprojects {
         google()
         maven { url 'https://maven.google.com' }
         maven { url 'https://www.jitpack.io' }
+
+        // https://stackoverflow.com/a/74333788/5447468
+        // TODO: remove once we update RN
+        exclusiveContent {
+            // We get React Native's Android binaries exclusively through npm,
+            // from a local Maven repo inside node_modules/react-native/.
+            // (The use of exclusiveContent prevents looking elsewhere like Maven Central
+            // and potentially getting a wrong version.)
+            filter {
+                includeGroup "com.facebook.react"
+            }
+            forRepository {
+                maven {
+                    // NOTE: if you are in a monorepo, you may have "$rootDir/../../../node_modules/react-native/android"
+                    url "$rootDir/../node_modules/react-native/android"
+                }
+            }
+        }
+    }
+}
+
+subprojects { subproject ->	
+    afterEvaluate {	
+        if (!project.name.equalsIgnoreCase("app") && project.hasProperty("android")) {	
+            android {	
+                compileSdkVersion 31	
+                buildToolsVersion "31.0.0"
+                defaultConfig {	
+                    minSdkVersion 23	
+                    targetSdkVersion 31
+                }	
+            }	
+        }	
     }
 }

android/gradle.properties

@@ -23,7 +23,7 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.125.0
+FLIPPER_VERSION=0.175.0
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using

app/actions/actionsTypes.ts

@@ -28,7 +28,9 @@ export const ROOM = createRequestTypes('ROOM', [
 	'DELETE',
 	'REMOVED',
 	'FORWARD',
-	'USER_TYPING'
+	'USER_TYPING',
+	'HISTORY_REQUEST',
+	'HISTORY_FINISHED'
 ]);
 export const INQUIRY = createRequestTypes('INQUIRY', [
 	...defaultTypes,
@@ -38,7 +40,14 @@ export const INQUIRY = createRequestTypes('INQUIRY', [
 	'QUEUE_UPDATE',
 	'QUEUE_REMOVE'
 ]);
-export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS', 'SET_MASTER_DETAIL']);
+export const APP = createRequestTypes('APP', [
+	'START',
+	'READY',
+	'INIT',
+	'INIT_LOCAL_SETTINGS',
+	'SET_MASTER_DETAIL',
+	'SET_NOTIFICATION_PRESENCE_CAP'
+]);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);
 export const CREATE_DISCUSSION = createRequestTypes('CREATE_DISCUSSION', [...defaultTypes]);

app/actions/app.ts

@@ -12,7 +12,11 @@ interface ISetMasterDetail extends Action {
 	isMasterDetail: boolean;
 }
 
-export type TActionApp = IAppStart & ISetMasterDetail;
+interface ISetNotificationPresenceCap extends Action {
+	show: boolean;
+}
+
+export type TActionApp = IAppStart & ISetMasterDetail & ISetNotificationPresenceCap;
 
 interface Params {
 	root: RootEnum;
@@ -51,3 +55,10 @@ export function setMasterDetail(isMasterDetail: boolean): ISetMasterDetail {
 		isMasterDetail
 	};
 }
+
+export function setNotificationPresenceCap(show: boolean): ISetNotificationPresenceCap {
+	return {
+		type: APP.SET_NOTIFICATION_PRESENCE_CAP,
+		show
+	};
+}

app/actions/room.ts

@@ -1,6 +1,6 @@
 import { Action } from 'redux';
 
-import { ERoomType } from '../definitions/ERoomType';
+import { ERoomType, RoomType } from '../definitions';
 import { ROOM } from './actionsTypes';
 
 // TYPE RETURN RELATED
@@ -44,7 +44,24 @@ interface IUserTyping extends Action {
 	status: boolean;
 }
 
-export type TActionsRoom = TSubscribeRoom & TUnsubscribeRoom & ILeaveRoom & IDeleteRoom & IForwardRoom & IUserTyping;
+export interface IRoomHistoryRequest extends Action {
+	rid: string;
+	t: RoomType;
+	loaderId: string;
+}
+
+export interface IRoomHistoryFinished extends Action {
+	loaderId: string;
+}
+
+export type TActionsRoom = TSubscribeRoom &
+	TUnsubscribeRoom &
+	ILeaveRoom &
+	IDeleteRoom &
+	IForwardRoom &
+	IUserTyping &
+	IRoomHistoryRequest &
+	IRoomHistoryFinished;
 
 export function subscribeRoom(rid: string): TSubscribeRoom {
 	return {
@@ -99,3 +116,19 @@ export function userTyping(rid: string, status = true): IUserTyping {
 		status
 	};
 }
+
+export function roomHistoryRequest({ rid, t, loaderId }: { rid: string; t: RoomType; loaderId: string }): IRoomHistoryRequest {
+	return {
+		type: ROOM.HISTORY_REQUEST,
+		rid,
+		t,
+		loaderId
+	};
+}
+
+export function roomHistoryFinished({ loaderId }: { loaderId: string }): IRoomHistoryFinished {
+	return {
+		type: ROOM.HISTORY_FINISHED,
+		loaderId
+	};
+}

app/containers/ActionSheet/ActionSheet.tsx

@@ -138,7 +138,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.backgroundColor }}
+						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.tintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -24,7 +24,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: I
 		hasCancel ? (
 			<Touch
 				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.backgroundColor }]}
+				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
 				accessibilityLabel={I18n.t('Cancel')}
 			>
 				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
@@ -42,7 +42,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: I
 				keyExtractor={item => item.title}
 				bounces={true}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.backgroundColor }}
+				style={{ backgroundColor: colors.focusedBackground }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
 				contentContainerStyle={styles.content}

app/containers/ActionSheet/Item.tsx

@@ -21,7 +21,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	};
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: themes[theme].backgroundColor }]} testID={item.testID}>
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]} testID={item.testID}>
 			{item.icon ? (
 				<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
 			) : null}

app/containers/BackgroundContainer/index.tsx

@@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text> : null}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryText} /> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
 		</View>
 	);
 };

app/containers/Button/index.tsx

@@ -61,7 +61,7 @@ const Button = ({
 			disabled={disabled || loading}
 			style={[
 				styles.container,
-				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.tintColor : colors.backgroundColor },
+				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
 				disabled && styles.disabled,
 				style
 			]}

app/containers/CustomIcon/mappedIcons.js

@@ -1,4 +1,5 @@
 export const mappedIcons = {
+	'status-disabled': 59837,
 	'lamp-bulb': 59836,
 	'phone-in': 59835,
 	'basketball': 59776,

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -1,34 +1,31 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
-import { EMOJI_BUTTON_SIZE } from './styles';
-import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import { IEmoji } from '../../definitions/IEmoji';
+import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import { PressableEmoji } from './PressableEmoji';
+import { EMOJI_BUTTON_SIZE } from './styles';
 
 interface IEmojiCategoryProps {
 	emojis: IEmoji[];
 	onEmojiSelected: (emoji: IEmoji) => void;
 	tabLabel?: string; // needed for react-native-scrollable-tab-view only
+	parentWidth: number;
 }
 
-const EmojiCategory = ({ onEmojiSelected, emojis }: IEmojiCategoryProps): React.ReactElement | null => {
-	const { width } = useWindowDimensions();
-
-	const numColumns = Math.trunc(width / EMOJI_BUTTON_SIZE);
-	const marginHorizontal = (width % EMOJI_BUTTON_SIZE) / 2;
-
-	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
-
-	if (!width) {
+const EmojiCategory = ({ onEmojiSelected, emojis, parentWidth }: IEmojiCategoryProps): React.ReactElement | null => {
+	if (!parentWidth) {
 		return null;
 	}
 
+	const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
+	const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
+
+	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;
+
 	return (
 		<FlatList
-			// needed to update the numColumns when the width changes
-			key={`emoji-category-${width}`}
+			key={`emoji-category-${parentWidth}`}
 			keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 			data={emojis}
 			renderItem={renderItem}

app/containers/EmojiPicker/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 
@@ -20,6 +20,8 @@ const EmojiPicker = ({
 	searchedEmojis = []
 }: IEmojiPickerProps): React.ReactElement | null => {
 	const { colors } = useTheme();
+	const [parentWidth, setParentWidth] = useState(0);
+
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
 
 	const allCustomEmojis: ICustomEmojis = useAppSelector(
@@ -50,7 +52,14 @@ const EmojiPicker = ({
 		if (!emojis.length) {
 			return null;
 		}
-		return <EmojiCategory emojis={emojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} tabLabel={label} />;
+		return (
+			<EmojiCategory
+				parentWidth={parentWidth}
+				emojis={emojis}
+				onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
+				tabLabel={label}
+			/>
+		);
 	};
 
 	if (!loaded) {
@@ -58,9 +67,13 @@ const EmojiPicker = ({
 	}
 
 	return (
-		<View style={styles.emojiPickerContainer}>
+		<View style={styles.emojiPickerContainer} onLayout={e => setParentWidth(e.nativeEvent.layout.width)}>
 			{searching ? (
-				<EmojiCategory emojis={searchedEmojis} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} />
+				<EmojiCategory
+					emojis={searchedEmojis}
+					onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
+					parentWidth={parentWidth}
+				/>
 			) : (
 				<ScrollableTabView
 					renderTabBar={() => <TabBar />}
@@ -68,7 +81,7 @@ const EmojiPicker = ({
 						keyboardShouldPersistTaps: 'always',
 						keyboardDismissMode: 'none'
 					}}
-					style={{ backgroundColor: colors.backgroundColor }}
+					style={{ backgroundColor: colors.messageboxBackground }}
 				>
 					{categories.tabs.map((tab: any, i) => renderCategory(tab.category, i, tab.tabLabel))}
 				</ScrollableTabView>

app/containers/HeaderButton/HeaderButtonItemBadge.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
+import { STATUS_COLORS } from '../../lib/constants';
 import UnreadBadge from '../UnreadBadge';
 
 const styles = StyleSheet.create({
@@ -15,6 +16,8 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const Badge = ({ ...props }): React.ReactElement => <UnreadBadge {...props} style={styles.badgeContainer} small />;
+export const BadgeUnread = ({ ...props }): React.ReactElement => <UnreadBadge {...props} style={styles.badgeContainer} small />;
 
-export default Badge;
+export const BadgeWarn = (): React.ReactElement => (
+	<View style={[styles.badgeContainer, { width: 10, height: 10, backgroundColor: STATUS_COLORS.disabled }]} />
+);

app/containers/HeaderButton/HeaderButtons.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import { Header, HeaderBackground } from '@react-navigation/elements';
 import { NavigationContainer } from '@react-navigation/native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -103,9 +104,10 @@ export const Badge = () => (
 		<HeaderExample
 			left={() => (
 				<HeaderButton.Container left>
-					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} />} />
-					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} tunreadUser={[1]} />} />
-					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} tunreadGroup={[1]} />} />
+					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.BadgeUnread tunread={[1]} />} />
+					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.BadgeUnread tunread={[1]} tunreadUser={[1]} />} />
+					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.BadgeUnread tunread={[1]} tunreadGroup={[1]} />} />
+					<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn />} />
 				</HeaderButton.Container>
 			)}
 		/>
@@ -114,20 +116,23 @@ export const Badge = () => (
 
 const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 	<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
-		<HeaderExample
-			left={() => (
-				<HeaderButton.Container left>
-					<HeaderButton.Item iconName='threads' />
-				</HeaderButton.Container>
-			)}
-			right={() => (
-				<HeaderButton.Container>
-					<HeaderButton.Item title='Threads' />
-					<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} />} />
-				</HeaderButton.Container>
-			)}
-			colors={colors[theme]}
-		/>
+		<View style={{ flexDirection: 'column' }}>
+			<HeaderExample
+				left={() => (
+					<HeaderButton.Container left>
+						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn />} />
+						<HeaderButton.Item iconName='threads' />
+					</HeaderButton.Container>
+				)}
+				right={() => (
+					<HeaderButton.Container>
+						<HeaderButton.Item title='Threads' />
+						<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.BadgeUnread tunread={[1]} />} />
+					</HeaderButton.Container>
+				)}
+				colors={colors[theme]}
+			/>
+		</View>
 	</ThemeContext.Provider>
 );
 

app/containers/HeaderButton/index.ts

@@ -1,4 +1,4 @@
 export { default as Container } from './HeaderButtonContainer';
 export { default as Item } from './HeaderButtonItem';
-export { default as Badge } from './HeaderButtonItemBadge';
+export * from './HeaderButtonItemBadge';
 export * from './Common';

app/containers/InAppNotification/NotifierComponent.tsx

@@ -107,7 +107,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				styles.container,
 				(isMasterDetail || isLandscape) && styles.small,
 				{
-					backgroundColor: themes[theme].backgroundColor,
+					backgroundColor: themes[theme].focusedBackground,
 					borderColor: themes[theme].separatorColor,
 					marginTop: insets.top
 				}

app/containers/List/ListHeader.tsx

@@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.title, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>

app/containers/List/ListInfo.tsx

@@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });

app/containers/LoginServices/LoginServices.stories.tsx

@@ -84,7 +84,7 @@ export const ServiceList = () => (
 				<ButtonService
 					key={service._id}
 					onPress={() => {}}
-					backgroundColor={colors[theme].buttonBackgroundSecondaryDefault}
+					backgroundColor={colors[theme].chatComponentBackground}
 					buttonText={buttonText}
 					icon={icon}
 					name={service.name}

app/containers/LoginServices/Service.tsx

@@ -86,7 +86,7 @@ const Service = React.memo(
 			);
 		}
 
-		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.buttonBackgroundSecondaryDefault;
+		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.chatComponentBackground;
 
 		return (
 			<ButtonService

app/containers/LoginServices/ServicesSeparator.tsx

@@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
 					type='secondary'
 					onPress={onPress}
 					style={styles.options}
-					color={colors.tintColor}
+					color={colors.actionTintColor}
 				/>
 				<OrSeparator theme={theme} />
 			</>

app/containers/MessageActions/Header.tsx

@@ -65,7 +65,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
 	<Touch
 		testID={`message-actions-emoji-${item}`}
 		onPress={() => onReaction({ emoji: item })}
-		style={[styles.headerItem, { backgroundColor: themes[theme].backgroundColor }]}
+		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
 	>
 		{typeof item === 'string' ? (
 			<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
@@ -109,12 +109,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
 			<FlatList
 				data={frequentlyUsed.slice(0, quantity)}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: themes[theme].focusedBackground }}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}

app/containers/MessageBox/CommandsPreview/Item.tsx

@@ -40,7 +40,7 @@ const Item = ({ item }: IMessageBoxCommandsPreviewItem) => {
 					{loading ? <ActivityIndicator /> : null}
 				</FastImage>
 			) : (
-				<CustomIcon name='attach' size={36} color={themes[theme].tintColor} />
+				<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
 			)}
 		</TouchableOpacity>
 	);

app/containers/MessageBox/Mentions/FixedMentionItem.tsx

@@ -20,7 +20,7 @@ const FixedMentionItem = ({ item, onPress }: IMessageBoxFixedMentionItem) => {
 			style={[
 				styles.mentionItem,
 				{
-					backgroundColor: themes[theme].backgroundColor,
+					backgroundColor: themes[theme].auxiliaryBackground,
 					borderTopColor: themes[theme].separatorColor
 				}
 			]}

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -47,7 +47,7 @@ const MentionItemContent = React.memo(({ trackingType, item }: IMessageBoxMentio
 			return (
 				<>
 					<Text style={[styles.cannedItem, { color: themes[theme].titleText }]}>!{item.shortcut}</Text>
-					<Text numberOfLines={1} style={[styles.cannedMentionText, { color: themes[theme].auxiliaryText }]}>
+					<Text numberOfLines={1} style={[styles.cannedMentionText, { color: themes[theme].auxiliaryTintColor }]}>
 						{item.text}
 					</Text>
 				</>
@@ -92,7 +92,7 @@ const MentionItem = ({ item, trackingType }: IMessageBoxMentionItem) => {
 			style={[
 				styles.mentionItem,
 				{
-					backgroundColor: themes[theme].backgroundColor,
+					backgroundColor: themes[theme].auxiliaryBackground,
 					borderTopColor: themes[theme].separatorColor
 				}
 			]}

app/containers/MessageBox/Mentions/index.tsx

@@ -25,7 +25,7 @@ const Mentions = React.memo(
 		return (
 			<View testID='messagebox-container'>
 				<FlatList
-					style={[styles.mentionList, { backgroundColor: themes[theme].backgroundColor }]}
+					style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
 					ListHeaderComponent={() => (
 						<MentionHeaderList trackingType={trackingType} hasMentions={mentions.length > 0} loading={loading} />
 					)}

app/containers/MessageBox/RecordAudio.tsx

@@ -202,7 +202,7 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			return (
 				<BorderlessButton onPress={this.startRecordingAudio} style={styles.actionButton} testID='messagebox-send-audio'>
 					<View accessible accessibilityLabel={I18n.t('Send_audio_message')} accessibilityRole='button'>
-						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryText} />
+						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
 					</View>
 				</BorderlessButton>
 			);

app/containers/MessageBox/ReplyPreview.tsx

@@ -66,7 +66,7 @@ const ReplyPreview = React.memo(
 		const time = moment(message.ts).format(Message_TimeFormat);
 		return (
 			<View style={[styles.container, { backgroundColor: themes[theme].messageboxBackground }]}>
-				<View style={[styles.messageContainer, { backgroundColor: themes[theme].surfaceTint }]}>
+				<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
 					<View style={styles.header}>
 						<Text numberOfLines={1} style={[styles.username, { color: themes[theme].tintColor }]}>
 							{useRealName ? message.u?.name : message.u?.username}

app/containers/MessageBox/buttons/BaseButton.tsx

@@ -25,7 +25,7 @@ const BaseButton = ({ accessibilityLabel, icon, color, ...props }: IBaseButton)
 				accessibilityLabel={accessibilityLabel ? i18n.t(accessibilityLabel) : accessibilityLabel}
 				accessibilityRole='button'
 			>
-				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryText} />
+				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryTintColor} />
 			</View>
 		</BorderlessButton>
 	);

app/containers/MessageBox/index.tsx

@@ -302,7 +302,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (usedCannedResponse !== nextProps.usedCannedResponse) {
 			this.onChangeText(nextProps.usedCannedResponse ?? '');
 		}
-		if (sharing) {
+		if (sharing && !replying) {
 			this.setInput(nextProps.message.msg ?? '');
 			return;
 		}
@@ -857,14 +857,21 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	};
 
 	openShareView = (attachments: any) => {
-		const { message, replyCancel, replyWithMention } = this.props;
+		const { message, replyCancel, replyWithMention, replying } = this.props;
 		// Start a thread with an attachment
 		let value: TThreadModel | IMessage = this.thread;
 		if (replyWithMention) {
 			value = message;
 			replyCancel();
 		}
-		Navigation.navigate('ShareView', { room: this.room, thread: value, attachments });
+		Navigation.navigate('ShareView', {
+			room: this.room,
+			thread: value,
+			attachments,
+			replying,
+			replyingMessage: message,
+			closeReply: replyCancel
+		});
 	};
 
 	createDiscussion = () => {
@@ -1042,16 +1049,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 				// Legacy reply or quote (quote is a reply without mention)
 			} else {
-				const { user, roomType } = this.props;
-				const permalink = await this.getPermalink(replyingMessage);
-				let msg = `[ ](${permalink}) `;
-
-				// if original message wasn't sent by current user and neither from a direct room
-				if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
-					msg += `@${replyingMessage?.u?.username} `;
-				}
-
-				msg = `${msg} ${message}`;
+				const msg = await this.formatReplyMessage(replyingMessage, message);
 				onSubmit(msg);
 			}
 			replyCancel();
@@ -1063,6 +1061,20 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		}
 	};
 
+	formatReplyMessage = async (replyingMessage: IMessage, message = '') => {
+		const { user, roomType, replyWithMention, serverVersion } = this.props;
+		const permalink = await this.getPermalink(replyingMessage);
+		let msg = `[ ](${permalink}) `;
+
+		// if original message wasn't sent by current user and neither from a direct room
+		if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
+			msg += `@${replyingMessage?.u?.username} `;
+		}
+
+		const connectionString = compareServerVersion(serverVersion, 'lowerThan', '5.0.0') ? ' ' : '\n';
+		return `${msg}${connectionString}${message}`;
+	};
+
 	updateMentions = (keyword: any, type: string) => {
 		if (type === MENTIONS_TRACKING_TYPE_USERS) {
 			this.getUsers(keyword);
@@ -1272,7 +1284,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 						style={[
 							styles.textArea,
 							{ backgroundColor: themes[theme].messageboxBackground },
-							!recording && editing && { backgroundColor: themes[theme].statusBackgroundWarning }
+							!recording && editing && { backgroundColor: themes[theme].chatComponentBackground }
 						]}
 						testID='messagebox'
 					>

app/containers/RoomHeader/index.tsx

@@ -46,6 +46,7 @@ const RoomHeaderContainer = React.memo(
 		const connecting = useSelector((state: IApplicationState) => state.meteor.connecting || state.server.loading);
 		const usersTyping = useSelector((state: IApplicationState) => state.usersTyping, shallowEqual);
 		const connected = useSelector((state: IApplicationState) => state.meteor.connected);
+		const presenceDisabled = useSelector((state: IApplicationState) => state.settings.Presence_broadcast_disabled);
 		const activeUser = useSelector(
 			(state: IApplicationState) => (roomUserId ? state.activeUsers?.[roomUserId] : undefined),
 			shallowEqual
@@ -61,9 +62,13 @@ const RoomHeaderContainer = React.memo(
 
 		if (connected) {
 			if ((type === 'd' || (tmid && roomUserId)) && activeUser) {
-				const { status: statusActiveUser, statusText: statusTextActiveUser } = activeUser;
-				status = statusActiveUser;
-				statusText = statusTextActiveUser;
+				if (presenceDisabled) {
+					status = 'disabled';
+				} else {
+					const { status: statusActiveUser, statusText: statusTextActiveUser } = activeUser;
+					status = statusActiveUser;
+					statusText = statusTextActiveUser;
+				}
 			} else if (type === 'l' && visitor?.status) {
 				const { status: statusVisitor } = visitor;
 				status = statusVisitor;

app/containers/RoomItem/RoomItem.stories.tsx

@@ -65,6 +65,7 @@ export const UserStatus = () => (
 		<RoomItem status='busy' />
 		<RoomItem status='offline' />
 		<RoomItem status='loading' />
+		<RoomItem status='disabled' />
 		<RoomItem status='wrong' />
 	</>
 );

app/containers/RoomItem/Tag.tsx

@@ -15,7 +15,7 @@ const Tag = React.memo(({ name, testID }: ITag) => {
 
 	return (
 		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
-			<Text style={[styles.tagText, { color: themes[theme].auxiliaryText }]} numberOfLines={1} testID={testID}>
+			<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}>
 				{name}
 			</Text>
 		</View>

app/containers/RoomItem/Touchable.tsx

@@ -223,7 +223,7 @@ const Touchable = ({
 								onPress={handlePress}
 								testID={testID}
 								style={{
-									backgroundColor: isFocused ? colors.buttonBackgroundSecondaryDefault : colors.backgroundColor
+									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
 								}}
 							>
 								{children}

app/containers/RoomItem/index.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import { Subscription } from 'rxjs';
 
 import I18n from '../../i18n';
-import { useAppSelector } from '../../lib/hooks';
 import { getUserPresence } from '../../lib/methods';
 import { isGroupChat } from '../../lib/methods/helpers';
 import { formatDate } from '../../lib/methods/helpers/room';
 import { IRoomItemContainerProps } from './interfaces';
 import RoomItem from './RoomItem';
 import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
+import { useUserStatus } from './useUserStatus';
 
 export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
 
@@ -42,11 +42,11 @@ const RoomItemContainer = React.memo(
 		const isRead = getIsRead(item);
 		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt);
 		const alert = item.alert || item.tunread?.length;
-		const connected = useAppSelector(state => state.meteor.connected);
-		const userStatus = useAppSelector(state => state.activeUsers[id || '']?.status);
 		const [_, forceUpdate] = useReducer(x => x + 1, 1);
 		const roomSubscription = useRef<Subscription | null>(null);
 
+		const { connected, status } = useUserStatus(item.t, item?.visitor?.status, id);
+
 		useEffect(() => {
 			const init = () => {
 				if (item?.observe) {
@@ -85,8 +85,6 @@ const RoomItemContainer = React.memo(
 			accessibilityLabel = `, ${I18n.t('last_message')} ${date}`;
 		}
 
-		const status = item.t === 'l' ? item.visitor?.status || item.v?.status : userStatus;
-
 		return (
 			<RoomItem
 				name={name}

app/containers/RoomItem/useUserStatus.tsx

@@ -0,0 +1,30 @@
+import { TUserStatus } from '../../definitions';
+import { useAppSelector } from '../../lib/hooks';
+import { RoomTypes } from '../../lib/methods';
+
+export const useUserStatus = (
+	type: RoomTypes,
+	liveChatStatus?: TUserStatus,
+	id?: string
+): { connected: boolean; status: TUserStatus } => {
+	const connected = useAppSelector(state => state.meteor.connected);
+	const presenceDisabled = useAppSelector(state => state.settings.Presence_broadcast_disabled);
+	const userStatus = useAppSelector(state => state.activeUsers[id || '']?.status);
+
+	let status = 'loading';
+	if (connected) {
+		if (type === 'd') {
+			if (presenceDisabled) {
+				status = 'disabled';
+			} else {
+				status = userStatus || 'loading';
+			}
+		} else if (type === 'l' && liveChatStatus) {
+			status = liveChatStatus;
+		}
+	}
+	return {
+		connected,
+		status: status as TUserStatus
+	};
+};

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
@@ -29,22 +29,12 @@ interface IOmnichannelRoomIconProps {
 }
 
 export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnichannelRoomIconProps) => {
+	const [loading, setLoading] = useState(true);
+	const [svgError, setSvgError] = useState(false);
 	const baseUrl = useAppSelector(state => state.server?.server);
 	const connected = useAppSelector(state => state.meteor?.connected);
 
-	if (sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
-		return (
-			<SvgUri
-				height={size}
-				width={size}
-				color={STATUS_COLORS[status || 'offline']}
-				uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
-				style={style}
-			/>
-		);
-	}
-
-	return (
+	const customIcon = (
 		<CustomIcon
 			name={iconMap[sourceType?.type || 'other']}
 			size={size}
@@ -52,4 +42,23 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 			color={STATUS_COLORS[status || 'offline']}
 		/>
 	);
+
+	if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
+		return (
+			<>
+				<SvgUri
+					height={size}
+					width={size}
+					color={STATUS_COLORS[status || 'offline']}
+					uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
+					style={style}
+					onError={() => setSvgError(true)}
+					onLoad={() => setLoading(false)}
+				/>
+				{loading ? customIcon : null}
+			</>
+		);
+	}
+
+	return customIcon;
 };

app/containers/SafeAreaView.tsx

@@ -23,7 +23,7 @@ const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }:
 	const { theme } = useTheme();
 	return (
 		<SafeAreaContext
-			style={[styles.view, { backgroundColor: themes[theme].backgroundColor }, style]}
+			style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
 			edges={vertical ? ['right', 'left'] : undefined}
 			{...props}
 		>

app/containers/ServerItem/index.tsx

@@ -28,9 +28,9 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			onPress={onPress}
 			onLongPress={() => onLongPress?.()}
 			testID={`rooms-list-header-server-${item.id}`}
-			android_ripple={{ color: themes[theme].buttonBackgroundSecondaryPress }}
+			android_ripple={{ color: themes[theme].bannerBackground }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].buttonBackgroundSecondaryPress : themes[theme].backgroundColor
+				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
 			})}
 		>
 			<View style={styles.serverItemContainer}>

app/containers/Status/index.tsx

@@ -6,9 +6,15 @@ import { IStatus } from './definition';
 import { useAppSelector } from '../../lib/hooks';
 
 const StatusContainer = ({ id, style, size = 32, ...props }: Omit<IStatus, 'status'>): React.ReactElement => {
-	const status = useAppSelector(state =>
-		state.meteor.connected ? state.activeUsers[id] && state.activeUsers[id].status : 'loading'
-	) as TUserStatus;
+	const status = useAppSelector(state => {
+		if (state.settings.Presence_broadcast_disabled) {
+			return 'disabled';
+		}
+		if (state.meteor.connected) {
+			return state.activeUsers[id] && state.activeUsers[id].status;
+		}
+		return 'loading';
+	}) as TUserStatus;
 	return <Status size={size} style={style} status={status} {...props} />;
 };
 

app/containers/TextInput/FormTextInput.tsx

@@ -136,7 +136,7 @@ export const FormTextInput = ({
 
 				{showClearInput ? (
 					<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
-						<CustomIcon name='input-clear' size={20} color={colors.auxiliaryText} />
+						<CustomIcon name='input-clear' size={20} color={colors.auxiliaryTintColor} />
 					</Touchable>
 				) : null}
 

app/containers/ThreadDetails.tsx

@@ -87,7 +87,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 					<CustomIcon
 						size={24}
 						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryText}
+						color={themes[theme].auxiliaryTintColor}
 					/>
 				</Touchable>
 			</View>

app/containers/TwoFactor/index.tsx

@@ -136,7 +136,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 						<Button
 							title={I18n.t('Cancel')}
 							type='secondary'
-							backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
+							backgroundColor={themes[theme].chatComponentBackground}
 							style={styles.button}
 							onPress={onCancel}
 						/>

app/containers/UIKit/DatePicker.tsx

@@ -67,7 +67,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			<Touchable
 				onPress={() => onShow(!show)}
 				style={{ backgroundColor: themes[theme].backgroundColor }}
-				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
 					<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -29,8 +29,8 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 		<Touchable
 			key={item.value}
 			onPress={() => onSelect(item)}
-			style={[styles.chip, { backgroundColor: colors.backgroundColor }, style]}
-			background={Touchable.Ripple(colors.buttonBackgroundSecondaryPress)}
+			style={[styles.chip, { backgroundColor: colors.auxiliaryBackground }, style]}
+			background={Touchable.Ripple(colors.bannerBackground)}
 		>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}

app/containers/UIKit/MultiSelect/Input.tsx

@@ -23,7 +23,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 		<Touchable
 			onPress={onPress}
 			style={[{ backgroundColor: colors.backgroundColor }, styles.inputBorder, inputStyle]}
-			background={Touchable.Ripple(colors.buttonBackgroundSecondaryPress)}
+			background={Touchable.Ripple(colors.bannerBackground)}
 			disabled={disabled}
 		>
 			<View style={[styles.input, styles.inputBorder, { borderColor: colors.separatorColor }, innerInputStyle]}>

app/containers/UIKit/MultiSelect/MultiSelectContent.tsx

@@ -71,7 +71,7 @@ export const MultiSelectContent = React.memo(
 						testID='multi-select-search'
 						onChangeText={handleSearch}
 						placeholder={I18n.t('Search')}
-						inputStyle={{ backgroundColor: colors.backgroundColor }}
+						inputStyle={{ backgroundColor: colors.focusedBackground }}
 						bottomSheet={isIOS}
 						onSubmitEditing={() => {
 							setTimeout(() => {

app/containers/UIKit/Overflow.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+		background={Touchable.Ripple(themes[theme].bannerBackground)}
 		style={styles.option}
 	>
 		<Text>{parser.text(text)}</Text>
@@ -62,7 +62,7 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 		<>
 			<Touchable
 				ref={ref => (touchable[blockId] = ref)}
-				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
 				style={styles.menu}

app/containers/UIKit/VideoConferenceBlock/components/StartACallActionSheet.tsx

@@ -6,7 +6,6 @@ import i18n from '../../../../i18n';
 import { getSubscriptionByRoomId } from '../../../../lib/database/services/Subscription';
 import { useAppSelector } from '../../../../lib/hooks';
 import { getRoomAvatar, getUidDirectMessage } from '../../../../lib/methods/helpers';
-import { videoConfStartAndJoin } from '../../../../lib/methods/videoConf';
 import { useTheme } from '../../../../theme';
 import { useActionSheet } from '../../../ActionSheet';
 import AvatarContainer from '../../../Avatar';
@@ -16,12 +15,12 @@ import { BUTTON_HIT_SLOP } from '../../../message/utils';
 import StatusContainer from '../../../Status';
 import useStyle from './styles';
 
-export default function CallAgainActionSheet({ rid }: { rid: string }): React.ReactElement {
+export default function StartACallActionSheet({ rid, initCall }: { rid: string; initCall: Function }): React.ReactElement {
 	const style = useStyle();
 	const { colors } = useTheme();
-	const [user, setUser] = useState({ username: '', avatar: '', uid: '', rid: '' });
-	const [phone, setPhone] = useState(true);
-	const [camera, setCamera] = useState(false);
+	const [user, setUser] = useState({ username: '', avatar: '', uid: '' });
+	const [mic, setMic] = useState(true);
+	const [cam, setCam] = useState(false);
 	const username = useAppSelector(state => state.login.user.username);
 
 	const { hideActionSheet } = useActionSheet();
@@ -31,7 +30,7 @@ export default function CallAgainActionSheet({ rid }: { rid: string }): React.Re
 			const room = await getSubscriptionByRoomId(rid);
 			const uid = (await getUidDirectMessage(room)) as string;
 			const avt = getRoomAvatar(room);
-			setUser({ uid, username: room?.name || '', avatar: avt, rid: room?.id || '' });
+			setUser({ uid, username: room?.name || '', avatar: avt });
 		})();
 	}, [rid]);
 
@@ -43,25 +42,27 @@ export default function CallAgainActionSheet({ rid }: { rid: string }): React.Re
 				<Text style={style.actionSheetHeaderTitle}>{i18n.t('Start_a_call')}</Text>
 				<View style={style.actionSheetHeaderButtons}>
 					<Touchable
-						onPress={() => setCamera(!camera)}
-						style={[style.iconCallContainer, camera && style.enabledBackground, { marginRight: 6 }]}
+						onPress={() => setCam(!cam)}
+						style={[style.iconCallContainer, cam && style.enabledBackground, { marginRight: 6 }]}
 						hitSlop={BUTTON_HIT_SLOP}
 					>
-						<CustomIcon name={camera ? 'camera' : 'camera-disabled'} size={16} color={handleColor(camera)} />
+						<CustomIcon name={cam ? 'camera' : 'camera-disabled'} size={20} color={handleColor(cam)} />
 					</Touchable>
 					<Touchable
-						onPress={() => setPhone(!phone)}
-						style={[style.iconCallContainer, phone && style.enabledBackground]}
+						onPress={() => setMic(!mic)}
+						style={[style.iconCallContainer, mic && style.enabledBackground]}
 						hitSlop={BUTTON_HIT_SLOP}
 					>
-						<CustomIcon name={phone ? 'microphone' : 'microphone-disabled'} size={16} color={handleColor(phone)} />
+						<CustomIcon name={mic ? 'microphone' : 'microphone-disabled'} size={20} color={handleColor(mic)} />
 					</Touchable>
 				</View>
 			</View>
 			<View style={style.actionSheetUsernameContainer}>
 				<AvatarContainer text={user.avatar} size={36} />
 				<StatusContainer size={16} id={user.uid} style={{ marginLeft: 8, marginRight: 6 }} />
-				<Text style={style.actionSheetUsername}>{user.username}</Text>
+				<Text style={style.actionSheetUsername} numberOfLines={1}>
+					{user.username}
+				</Text>
 			</View>
 			<View style={style.actionSheetPhotoContainer}>
 				<AvatarContainer size={62} text={username} />
@@ -70,7 +71,7 @@ export default function CallAgainActionSheet({ rid }: { rid: string }): React.Re
 				onPress={() => {
 					hideActionSheet();
 					setTimeout(() => {
-						videoConfStartAndJoin(user.rid, camera);
+						initCall({ cam, mic });
 					}, 100);
 				}}
 				title={i18n.t('Call')}

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceDirect.tsx

@@ -3,17 +3,16 @@ import { Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import i18n from '../../../../i18n';
-import { useVideoConf } from '../../../../lib/hooks/useVideoConf';
+import { videoConfJoin } from '../../../../lib/methods/videoConf';
 import useStyle from './styles';
 import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
 
 const VideoConferenceDirect = React.memo(({ blockId }: { blockId: string }) => {
 	const style = useStyle();
-	const { joinCall } = useVideoConf();
 
 	return (
 		<VideoConferenceBaseContainer variant='incoming'>
-			<Touchable style={style.callToActionButton} onPress={() => joinCall(blockId)}>
+			<Touchable style={style.callToActionButton} onPress={() => videoConfJoin(blockId)}>
 				<Text style={style.callToActionButtonText}>{i18n.t('Join')}</Text>
 			</Touchable>
 			<Text style={style.callBack}>{i18n.t('Waiting_for_answer')}</Text>

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx

@@ -6,9 +6,7 @@ import { IUser } from '../../../../definitions';
 import { VideoConferenceType } from '../../../../definitions/IVideoConference';
 import i18n from '../../../../i18n';
 import { useAppSelector } from '../../../../lib/hooks';
-import { useSnaps } from '../../../../lib/hooks/useSnaps';
-import { useActionSheet } from '../../../ActionSheet';
-import CallAgainActionSheet from './CallAgainActionSheet';
+import { useVideoConf } from '../../../../lib/hooks/useVideoConf';
 import { CallParticipants, TCallUsers } from './CallParticipants';
 import useStyle from './styles';
 import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
@@ -26,8 +24,7 @@ export default function VideoConferenceEnded({
 }): React.ReactElement {
 	const style = useStyle();
 	const username = useAppSelector(state => state.login.user.username);
-	const { showActionSheet } = useActionSheet();
-	const snaps = useSnaps([1250]);
+	const { showInitCallActionSheet } = useVideoConf(rid);
 
 	const onlyAuthorOnCall = users.length === 1 && users.some(user => user.username === createdBy.username);
 
@@ -35,15 +32,7 @@ export default function VideoConferenceEnded({
 		<VideoConferenceBaseContainer variant='ended'>
 			{type === 'direct' ? (
 				<>
-					<Touchable
-						style={style.callToActionCallBack}
-						onPress={() =>
-							showActionSheet({
-								children: <CallAgainActionSheet rid={rid} />,
-								snaps
-							})
-						}
-					>
+					<Touchable style={style.callToActionCallBack} onPress={showInitCallActionSheet}>
 						<Text style={style.callToActionCallBackText}>
 							{createdBy.username === username ? i18n.t('Call_back') : i18n.t('Call_again')}
 						</Text>

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx

@@ -3,18 +3,17 @@ import { Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import i18n from '../../../../i18n';
-import { useVideoConf } from '../../../../lib/hooks/useVideoConf';
+import { videoConfJoin } from '../../../../lib/methods/videoConf';
 import { CallParticipants, TCallUsers } from './CallParticipants';
 import useStyle from './styles';
 import { VideoConferenceBaseContainer } from './VideoConferenceBaseContainer';
 
 export default function VideoConferenceOutgoing({ users, blockId }: { users: TCallUsers; blockId: string }): React.ReactElement {
 	const style = useStyle();
-	const { joinCall } = useVideoConf();
 
 	return (
 		<VideoConferenceBaseContainer variant='outgoing'>
-			<Touchable style={style.callToActionButton} onPress={() => joinCall(blockId)}>
+			<Touchable style={style.callToActionButton} onPress={() => videoConfJoin(blockId)}>
 				<Text style={style.callToActionButtonText}>{i18n.t('Join')}</Text>
 			</Touchable>
 			<CallParticipants users={users} />

app/containers/UIKit/VideoConferenceBlock/components/styles.ts

@@ -100,7 +100,8 @@ export default function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary
+			color: colors.passcodePrimary,
+			flexShrink: 1
 		},
 		enabledBackground: {
 			backgroundColor: colors.conferenceCallEnabledIconBackground

app/containers/UIKit/utils.ts

@@ -2,7 +2,7 @@
 import { BlockContext } from '@rocket.chat/ui-kit';
 import React, { useContext, useState } from 'react';
 
-import { useVideoConf } from '../../lib/hooks/useVideoConf';
+import { videoConfJoin } from '../../lib/methods/videoConf';
 import { IText } from './interfaces';
 
 export const textParser = ([{ text }]: IText[]) => text;
@@ -40,7 +40,6 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUse
 	const { action, appId: appIdFromContext, viewId, state, language, errors, values = {} } = useContext(KitContext);
 	const { value = initialValue } = values[actionId] || {};
 	const [loading, setLoading] = useState(false);
-	const { joinCall } = useVideoConf();
 
 	const error = errors && actionId && errors[actionId];
 
@@ -58,7 +57,7 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }: IUse
 				try {
 					if (appId === 'videoconf-core' && blockId) {
 						setLoading(false);
-						return joinCall(blockId);
+						return videoConfJoin(blockId);
 					}
 					await action({
 						blockId,

app/containers/UserGeneratedContentRules.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, StyleSheet, Text, ViewStyle } from 'react-native';
+
+import sharedStyles from '../views/Styles';
+import { useTheme } from '../theme';
+import openLink from '../lib/methods/helpers/openLink';
+import { useAppSelector } from '../lib/hooks';
+import I18n from '../i18n';
+
+const styles = StyleSheet.create({
+	bottomContainer: {
+		flexDirection: 'column',
+		alignItems: 'center',
+		marginBottom: 32,
+		marginHorizontal: 30
+	},
+	bottomContainerText: {
+		...sharedStyles.textRegular,
+		fontSize: 13,
+		textAlign: 'center'
+	},
+	bottomContainerTextBold: {
+		...sharedStyles.textSemibold,
+		fontSize: 13,
+		textAlign: 'center'
+	}
+});
+
+const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
+	const { colors, theme } = useTheme();
+	const { server } = useAppSelector(state => ({
+		server: state.server.server
+	}));
+
+	const openContract = (route: string) => {
+		if (!server) {
+			return;
+		}
+		openLink(`${server}/${route}`, theme);
+	};
+	return (
+		<View style={[styles.bottomContainer, styleContainer]}>
+			<Text style={[styles.bottomContainerText, { color: colors.auxiliaryText }]}>
+				{`${I18n.t('Onboarding_agree_terms')}\n`}
+				<Text
+					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					onPress={() => openContract('terms-of-service')}
+				>
+					{I18n.t('Terms_of_Service')}
+				</Text>{' '}
+				{I18n.t('and')}
+				<Text
+					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+					onPress={() => openContract('privacy-policy')}
+				>
+					{' '}
+					{I18n.t('Privacy_Policy')}
+				</Text>
+			</Text>
+		</View>
+	);
+};
+
+export default UGCRules;

app/containers/UserItem.tsx

@@ -54,10 +54,10 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			onLongPress={onLongPress}
 			testID={testID}
 			android_ripple={{
-				color: colors.buttonBackgroundSecondaryPress
+				color: colors.bannerBackground
 			}}
 			style={({ pressed }: any) => ({
-				backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent'
+				backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
 			})}
 		>
 			<View style={[styles.container, styles.button, style]}>
@@ -67,7 +67,7 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 						{name}
 					</Text>
 				</View>
-				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.tintColor} style={styles.icon} /> : null}
+				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.actionTintColor} style={styles.icon} /> : null}
 			</View>
 		</Pressable>
 	);

app/containers/markdown/Link.tsx

@@ -37,7 +37,7 @@ const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {
 
 	// if you have a [](https://rocket.chat) render https://rocket.chat
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].tintColor }}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
 			{childLength !== 0 ? children : link}
 		</Text>
 	);

app/containers/markdown/index.tsx

@@ -157,8 +157,8 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 					{
 						...styles.codeInline,
 						color: themes[theme!].bodyText,
-						backgroundColor: themes[theme!].buttonBackgroundSecondaryPress,
-						borderColor: themes[theme!].borderColor
+						backgroundColor: themes[theme!].bannerBackground,
+						borderColor: themes[theme!].bannerBackground
 					},
 					...style
 				]}
@@ -176,8 +176,8 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 					{
 						...styles.codeBlock,
 						color: themes[theme!].bodyText,
-						backgroundColor: themes[theme!].buttonBackgroundSecondaryPress,
-						borderColor: themes[theme!].borderColor
+						backgroundColor: themes[theme!].bannerBackground,
+						borderColor: themes[theme!].bannerBackground
 					},
 					...style
 				]}

app/containers/markdown/new/Code.tsx

@@ -18,7 +18,7 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 			style={[
 				styles.codeBlock,
 				{
-					backgroundColor: colors.buttonBackgroundSecondaryPress,
+					backgroundColor: colors.bannerBackground,
 					borderColor: colors.borderColor
 				}
 			]}

app/containers/markdown/new/Image.tsx

@@ -26,7 +26,7 @@ const MessageImage = ({ img, theme }: TMessageImage) => (
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].tintColor
+			color: themes[theme].actionTintColor
 		}}
 	/>
 );

app/containers/markdown/new/Inline.tsx

@@ -18,13 +18,29 @@ import MarkdownContext from './MarkdownContext';
 
 interface IParagraphProps {
 	value: ParagraphProps['value'];
+	forceTrim?: boolean;
 }
 
-const Inline = ({ value }: IParagraphProps): React.ReactElement | null => {
+const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | null => {
 	const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
 	return (
 		<Text style={styles.inline}>
-			{value.map(block => {
+			{value.map((block, index) => {
+				// We are forcing trim when is a `[ ](https://https://open.rocket.chat/) plain_text`
+				// to clean the empty spaces
+				if (forceTrim) {
+					if (index === 0 && block.type === 'LINK') {
+						block.value.label.value =
+							// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
+							// https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141
+							// @ts-ignore
+							block.value?.label?.value?.toString().trimLeft() || block?.value?.label?.[0]?.value?.toString().trimLeft();
+					}
+					if (index === 1 && block.type !== 'LINK') {
+						block.value = block.value?.toString().trimLeft();
+					}
+				}
+
 				switch (block.type) {
 					case 'IMAGE':
 						return <Image value={block.value} />;

app/containers/markdown/new/InlineCode.tsx

@@ -19,7 +19,7 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
 				styles.codeInline,
 				{
 					color: themes[theme].bodyText,
-					backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
+					backgroundColor: themes[theme].bannerBackground,
 					borderColor: themes[theme].borderColor
 				}
 			]}

app/containers/markdown/new/Link.tsx

@@ -39,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].tintColor }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
 			{(block => {
 				const blockArray = Array.isArray(block) ? block : [block];
 				return blockArray.map(blockInArray => {

app/containers/markdown/new/NewMarkdown.stories.tsx

@@ -381,27 +381,6 @@ export const BlockQuote = () => (
 	</View>
 );
 
-const rocketChatLink = [
-	{
-		type: 'PARAGRAPH',
-		value: [
-			{
-				type: 'LINK',
-				value: {
-					src: {
-						type: 'PLAIN_TEXT',
-						value: 'https://rocket.chat'
-					},
-					label: {
-						type: 'PLAIN_TEXT',
-						value: 'https://rocket.chat'
-					}
-				}
-			}
-		]
-	}
-];
-
 const markdownLink = [
 	{
 		type: 'PARAGRAPH',
@@ -487,7 +466,6 @@ const markdownLinkWithEmphasis = [
 
 export const Links = () => (
 	<View style={styles.container}>
-		<NewMarkdown tokens={rocketChatLink} />
 		<NewMarkdown tokens={markdownLink} />
 		<NewMarkdown tokens={markdownLinkWithEmphasis} />
 	</View>
@@ -806,3 +784,128 @@ export const InlineKatex = () => (
 		<NewMarkdown tokens={inlineKatex} />
 	</View>
 );
+
+const messageQuote = {
+	/**
+	 # Hello head 1
+	 [ ](https://google.com)
+	 */
+	headAndLink: [
+		{ type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Hello head 1' }] },
+		{ type: 'LINE_BREAK' },
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'LINK',
+					value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
+				}
+			]
+		}
+	],
+	/**
+	 # Head 1 as the first line then line break and after paragraph
+	 bla bla bla bla bla bla 
+	 bla bla bla bla bla bla 
+	 [ ](https://google.com)
+	 */
+	headTextAndLink: [
+		{
+			type: 'HEADING',
+			level: 1,
+			value: [{ type: 'PLAIN_TEXT', value: 'Head 1 as the first line then line break and after paragraph' }]
+		},
+		{ type: 'LINE_BREAK' },
+		{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] },
+		{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'bla bla bla bla bla bla ' }] },
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'LINK',
+					value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
+				}
+			]
+		}
+	],
+	/**
+	 [ ](permalink from message)\n# Head 1 after a forced line break
+	 asdas asd asd asd
+	 */
+	headTextAndQuote: [
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'LINK',
+					value: {
+						src: { type: 'PLAIN_TEXT', value: 'https://open.rocket.chat/direct/subaru123?msg=QB42gWcaO6BgqtLTo' },
+						label: { type: 'PLAIN_TEXT', value: ' ' }
+					}
+				},
+				{ type: 'PLAIN_TEXT', value: ' ' }
+			]
+		},
+		{ type: 'HEADING', level: 1, value: [{ type: 'PLAIN_TEXT', value: 'Head 1 after a forced line break' }] },
+		{ type: 'LINE_BREAK' },
+		{ type: 'PARAGRAPH', value: [{ type: 'PLAIN_TEXT', value: 'Description' }] }
+	],
+	/**
+	 [ ](https://google.com) *There is a link before this bold separated by single space*
+	 */
+	linkAndBoldText: [
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'LINK',
+					value: { src: { type: 'PLAIN_TEXT', value: 'https://google.com' }, label: { type: 'PLAIN_TEXT', value: ' ' } }
+				},
+				{ type: 'PLAIN_TEXT', value: ' ' },
+				{ type: 'BOLD', value: [{ type: 'PLAIN_TEXT', value: 'There is a link before this bold separated by single space' }] }
+			]
+		}
+	],
+	simpleQuote: [
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'LINK',
+					value: {
+						src: {
+							type: 'PLAIN_TEXT',
+							value: 'https://open.rocket.chat/group/quoteeee9798789?msg=ZZp6t2dCRX4TqExht'
+						},
+						// format of label for servers greater or equal than 6.0
+						label: [
+							{
+								type: 'PLAIN_TEXT',
+								value: ' '
+							}
+						]
+					}
+				}
+			]
+		},
+		{
+			type: 'PARAGRAPH',
+			value: [
+				{
+					type: 'PLAIN_TEXT',
+					value: 'Quoting a message wrote before'
+				}
+			]
+		}
+	]
+};
+
+export const MessageQuote = () => (
+	<View style={styles.container}>
+		<NewMarkdown tokens={messageQuote.headAndLink} />
+		<NewMarkdown tokens={messageQuote.headTextAndLink} />
+		<NewMarkdown tokens={messageQuote.headTextAndQuote} />
+		<NewMarkdown tokens={messageQuote.linkAndBoldText} />
+		<NewMarkdown tokens={messageQuote.simpleQuote} />
+	</View>
+);

app/containers/markdown/new/Paragraph.tsx

@@ -12,10 +12,28 @@ interface IParagraphProps {
 }
 
 const Paragraph = ({ value }: IParagraphProps) => {
+	let forceTrim = false;
 	const { theme } = useTheme();
+	if (
+		value?.[0]?.type === 'LINK' &&
+		// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
+		// https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141
+		// @ts-ignore
+		(value?.[0]?.value?.label?.value?.toString().trim() === '' || value?.[0]?.value?.label?.[0]?.value?.toString().trim() === '')
+	) {
+		// We are returning null when we receive a message like this: `[ ](https://open.rocket.chat/)\nplain_text`
+		// to avoid render a line empty above the the message
+		if (value.length === 1) {
+			return null;
+		}
+		if (value.length === 2 && value?.[1]?.type === 'PLAIN_TEXT' && value?.[1]?.value?.toString().trim() === '') {
+			return null;
+		}
+		forceTrim = true;
+	}
 	return (
 		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
-			<Inline value={value} />
+			<Inline value={value} forceTrim={forceTrim} />
 		</Text>
 	);
 };

app/containers/markdown/new/Plain.tsx

@@ -8,7 +8,7 @@ interface IPlainProps {
 	value: PlainProps['value'];
 }
 
-const Plain = ({ value }: IPlainProps) => (
+const Plain = ({ value }: IPlainProps): React.ReactElement => (
 	<Text accessibilityLabel={value} style={styles.plainText}>
 		{value}
 	</Text>

app/containers/markdown/new/TaskList.tsx

@@ -4,7 +4,6 @@ import { Tasks as TasksProps } from '@rocket.chat/message-parser';
 
 import Inline from './Inline';
 import styles from '../styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface ITasksProps {
@@ -12,13 +11,15 @@ interface ITasksProps {
 }
 
 const TaskList = ({ value = [] }: ITasksProps) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 	return (
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
-					<Inline value={item.value} />
+					<Text style={[styles.text, { color: colors.bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
+					<Text style={[styles.inline, { color: colors.bodyText }]}>
+						<Inline value={item.value} />
+					</Text>
 				</View>
 			))}
 		</View>

app/containers/message/Audio.tsx

@@ -300,7 +300,10 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 					theme={theme}
 				/>
 				<View
-					style={[styles.audioContainer, { backgroundColor: themes[theme].surfaceTint, borderColor: themes[theme].borderColor }]}
+					style={[
+						styles.audioContainer,
+						{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
+					]}
 				>
 					<Button disabled={isReply} loading={loading} paused={paused} onPress={this.togglePlayPause} theme={theme} />
 					<Slider

app/containers/message/Broadcast.tsx

@@ -21,7 +21,7 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
 					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 					hitSlop={BUTTON_HIT_SLOP}
 					testID='message-broadcast-reply'

app/containers/message/CallButton.tsx

@@ -10,13 +10,13 @@ import { themes } from '../../lib/constants';
 import { IMessageCallButton } from './interfaces';
 import { useTheme } from '../../theme';
 
-const CallButton = React.memo(({ callJitsi }: IMessageCallButton) => {
+const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.buttonContainer}>
 			<Touchable
-				onPress={callJitsi}
-				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+				onPress={handleEnterCall}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
 				style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 				hitSlop={BUTTON_HIT_SLOP}
 			>

app/containers/message/Components/CollapsibleQuote/index.tsx

@@ -125,7 +125,7 @@ const CollapsibleQuote = React.memo(
 
 		let {
 			borderColor,
-			surfaceTint: backgroundColor,
+			chatComponentBackground: backgroundColor,
 			collapsibleQuoteBorder,
 			collapsibleChevron,
 			headerTintColor
@@ -161,7 +161,7 @@ const CollapsibleQuote = React.memo(
 							borderLeftWidth: 2
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
 					hitSlop={BUTTON_HIT_SLOP}
 				>
 					<View style={styles.touchableContainer}>

app/containers/message/Components/RightIcons/ReadReceipt.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 
-import { themes } from '../../../../lib/constants';
 import { CustomIcon } from '../../../CustomIcon';
 import styles from '../../styles';
 import { useTheme } from '../../../../theme';
 
 const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }: { isReadReceiptEnabled?: boolean; unread?: boolean }) => {
-	const { theme } = useTheme();
-	if (isReadReceiptEnabled && !unread && unread !== null) {
-		return <CustomIcon name='check' color={themes[theme].tintColor} size={16} style={styles.rightIcons} />;
+	const { colors } = useTheme();
+	if (isReadReceiptEnabled) {
+		return (
+			<CustomIcon
+				name='check'
+				color={!unread && unread !== null ? colors.tintColor : colors.auxiliaryTintColor}
+				size={16}
+				style={styles.rightIcons}
+			/>
+		);
 	}
 	return null;
 });

app/containers/message/Content.tsx

@@ -53,7 +53,7 @@ const Content = React.memo(
 			content = (
 				<Markdown
 					msg={props.msg}
-					md={props.md}
+					md={props.type !== 'e2e' ? props.md : undefined}
 					getCustomEmoji={props.getCustomEmoji}
 					enableMessageParser={user.enableMessageParserEarlyAdoption}
 					username={user.username}

app/containers/message/Discussion.tsx

@@ -29,7 +29,7 @@ const Discussion = React.memo(
 				<View style={styles.buttonContainer}>
 					<Touchable
 						onPress={onDiscussionPress}
-						background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+						background={Touchable.Ripple(themes[theme].bannerBackground)}
 						style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 						hitSlop={BUTTON_HIT_SLOP}
 					>

app/containers/message/Image.tsx

@@ -38,7 +38,7 @@ const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButto
 		disabled={disabled}
 		onPress={onPress}
 		style={styles.imageContainer}
-		background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+		background={Touchable.Ripple(themes[theme].bannerBackground)}
 	>
 		{children}
 	</Touchable>
@@ -51,7 +51,7 @@ export const MessageImage = React.memo(({ imgUri, theme }: { imgUri: string; the
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].tintColor
+			color: themes[theme].actionTintColor
 		}}
 	/>
 ));

app/containers/message/MessageAvatar.tsx

@@ -18,7 +18,7 @@ const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomIn
 				style={small ? styles.avatarSmall : styles.avatar}
 				text={avatar ? '' : author.username}
 				size={small ? 20 : 36}
-				borderRadius={small ? 2 : 4}
+				borderRadius={4}
 				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
 				getCustomEmoji={getCustomEmoji}
 				avatar={avatar}

app/containers/message/Reactions.tsx

@@ -36,7 +36,7 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			key='message-add-reaction'
 			testID='message-add-reaction'
 			style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
-			background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
 			<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
@@ -57,9 +57,9 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[
 				styles.reactionButton,
-				{ backgroundColor: reacted ? themes[theme].buttonBackgroundSecondaryPress : themes[theme].backgroundColor }
+				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }
 			]}
-			background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+			background={Touchable.Ripple(themes[theme].bannerBackground)}
 			hitSlop={BUTTON_HIT_SLOP}
 		>
 			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>

app/containers/message/Reply.tsx

@@ -100,7 +100,7 @@ const Title = React.memo(
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
-					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].auxiliaryText }]}>
+					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].auxiliaryTintColor }]}>
 						{attachment.author_name}
 					</Text>
 				) : null}
@@ -131,7 +131,7 @@ const Description = React.memo(
 		return (
 			<Markdown
 				msg={text}
-				style={[{ color: themes[theme].auxiliaryText, fontSize: 14 }]}
+				style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14 }]}
 				username={user.username}
 				getCustomEmoji={getCustomEmoji}
 				theme={theme}
@@ -242,31 +242,28 @@ const Reply = React.memo(
 							borderColor
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
 					disabled={loading}
 				>
 					<View style={styles.attachmentContainer}>
 						<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
+						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
+						<UrlImage image={attachment.thumb_url} />
 						<Attachments
 							attachments={attachment.attachments}
 							getCustomEmoji={getCustomEmoji}
 							timeFormat={timeFormat}
-							style={[{ color: themes[theme].auxiliaryText, fontSize: 14, marginBottom: 8 }]}
+							style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14, marginBottom: 8 }]}
 							isReply
 							id={messageId}
 						/>
-						<UrlImage image={attachment.thumb_url} />
-						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
 						<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
 						{loading ? (
 							<View style={[styles.backdrop]}>
 								<View
 									style={[
 										styles.backdrop,
-										{
-											backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
-											opacity: themes[theme].attachmentLoadingOpacity
-										}
+										{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
 									]}
 								></View>
 								<RCActivityIndicator />

app/containers/message/Urls.tsx

@@ -116,11 +116,11 @@ const Url = React.memo(
 					index > 0 && styles.marginTop,
 					styles.container,
 					{
-						backgroundColor: themes[theme].surfaceTint,
+						backgroundColor: themes[theme].chatComponentBackground,
 						borderColor: themes[theme].borderColor
 					}
 				]}
-				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
+				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<>
 					<UrlImage image={url.image} />